0

マルチデバイスハブリッドアプリの下に単純な「シングルページアプリケーション」を実装しようとしています。ボタンを押した後 (そしていくつかの ajax POST クエリを実行した後)、新しい HTML を「本文」に挿入しようとしています:

var finalHtml = '<header class="bar bar-nav">' +
    '<h1 class="title">Some text</h1>' +
'</header>' +
'<div class="content">' +
'</div>';
console.log('Rendering: ' + finalHtml);
$('body').html(finalHtml);

何も起こりません。ボディの内部HTMLが変わっているのは(デバッグ中に)わかるのですが、結局ページは元通りになってしまいます。私は試した

document.body.insertAdjacentHTML('afterbegin', finalHtml);

また

document.getElementById('appbody').innerHTML = finalHtml;

しかし、うまくいきません。

私は何が欠けていますか？

更新: ページの更新の最後に、Javascript コンソールの出力は次のようになります。

HTML1300: Navigation occurred File: index.html

何らかの理由でページが更新されたようです。なぜでしょうか？HTML 部分:

    <form>

        <input type="text" id="login" placeholder="Login" autofocus>
        <input type="text" id="pass" placeholder="Password">
        <button class="btn btn-primary btn-block" onclick="try_login(document.getElementById('login').value, document.getElementById('pass').value, device.platform + ' ' + device.version);">
            Login
        </button>

    </form>

Javascript 部分:

function try_login(username, password, dev) {

var parameters = '';

jQuery.ajax({
    type: "POST",
    url: "http://some_url/Services/Authorize",
    data: JSON.stringify(parameters),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    crossDomain: true,
    cache: false,
    processdata: true,
    success: function (msg) {
        renderView(DataView(msg));
    },
    error: function (obj, errorMessage) {
        renderView(LoginView() + ErrorView(errorMessage));
    },

});
};
4

1 に答える 1

0

問題が解決しました！フォームのボタンはページを更新するので、フォームのtype="button"ボタンに追加しました。ここにある解決策：フォーム内のボタンがクリックされたときにページが更新されないようにする

于 2014-11-05T09:17:59.460 に答える