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 开始后加载 otherPage.json，因为它会获取 page.html 进程修改的数据。

4

3 回答 3

2

我将 $.getJSON 更改为 $.ajax 以添加“async: false”，它解决了我的问题。

于 2013-08-01T14:04:52.237 回答
1

它将如何工作；在 onlick 上，您的 href 属性将优先，ajax 调用将停止。

ajax 调用完成后加载 .html 页面。

<a href="#" onclick="loadAjax();">link</a>

并在 loadAjax() 函数中，将页面动态分配给 href 属性。

function loadAjax() {
    setTimeout(function() {
        $.getJSON('otherPage.json', function(data) {
            $.each(data, function(key, val) {
                //do something
            });
        });
    }, 2000);
    this.href="Page.html"
}

对此使用 ref 变量（始终是一个好习惯）

于 2013-08-01T12:43:35.643 回答
1

好吧，如果您单击一个链接并引用另一个页面，则当前页面的所有正在运行的请求都将被取消...

这是预期和想要的行为（以防止不必要的加载）。
如果您需要同时加载两个单独的页面，则需要 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 回答