2

次のようなリンクがあります。

<a href="page.html" onclick="loadAjax();">link</a>

page.html のロードには非常に時間がかかります (サーバー側のプロセスが長いため)。

loadAjax 関数は次のようになります。

function loadAjax() {
    setTimeout(function() {
        $.getJSON('otherPage.json', function(data) {
            $.each(data, function(key, val) {
                //do something
            });
        });
    }, 2000);
}

しかし、リンクをクリックすると、page.html が読み込まれ、Ajax クエリが停止します。Chrome の開発者ツールでは、otherPage.json の横に「キャンセル」と表示されます。

したがって、page.html のプロセスによって変更されたデータを取得するため、page.html のロードが開始された後に otherPage.json をロードする必要があります。

4

3 に答える 3

2

$.ajax の $.getJSON を変更して「async: false」を追加すると、問題が解決しました。

于 2013-08-01T14:04:52.237 に答える
1

リンクをクリックして別のページを参照すると、現在のページで実行中のすべてのリクエストがキャンセルされます...

これは予期された望ましい動作です (不要な読み込みを防ぐため)。
2 つの別々のページを同時にロードする必要がある場合は、2 つの ajax リクエストが必要です。これの意味は：

$('#htmlpagelink').click(function(){
   loadAjax(page.html);
   loadAjax(otherPage.json);
});

function loadAjax(url){
  /*  ...  code   ...   */
}

注意してください。これは現在のページを変更しないため、ユーザーが別のリンクをクリックした場合は、最初からやり直す必要があります。

代わりに、サーバーが比較的小さく、したがって高速な html ページを返すようにすることで、結果の最初の表示を高速化できます。このページは、まさにこの構成でサーバーからデータのロードを直接開始します。このような何かがうまくいくはずです：

<html>
  <head> 
    <title>Page Title - loading...</title>
    <script type="text/javascript">
        $(document).load(loadContent());

        function loadContent(){
            //see upper code-block
        }
    </script>
  </head>
  <body>
    <img src="/loading.gif" alt="loading..." />
  </body>
</html>
于 2013-08-01T12:54:46.487 に答える