Question

我有这样的链接：

<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的进程修改数据。

Answer 1

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

Answer 2

它将如何运作;在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变量（总是一个好习惯）

Answer 3

如果您点击一个链接并引用另一个页面，那么当前页面的所有正在运行的请求都会被取消...

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

单击链接时取消了jQuery Ajax查询

3 个答案: