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

I have a link like this:

我有这样的链接：

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

page.html is verry long to load (due to a long process server-side).

page.html加载很长（由于服务器端的进程很长）。

The loadAjax function is like this:

loadAjax函数是这样的：

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

But when I click the link, page.html is loading and Ajax query stops. In Chrome's developper tool I see "canceled" next to otherPage.json.

但是当我点击链接时，page.html正在加载并且Ajax查询停止。在Chrome的开发工具中，我看到otherPage.json旁边的“已取消”。

So I have to load otherPage.json after loading of page.html starts because it get data modified by page.html's process.

因此，我必须在加载page.html之后加载otherPage.json，因为它会通过page.html的进程修改数据。

3 个解决方案

#1

I changed $.getJSON for $.ajax to add "async: false" and it solved my problem.

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

#2

How it will work; on onlick your href attribute will take precedence and ajax call will stop.

它将如何运作;在onlick上你的href属性优先，ajax调用将停止。

Load the .html page after ajax call finished.

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

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

and in loadAjax() function, assign page dynamically to href attribute.

并在loadAjax（）函数中，动态地将页面分配给href属性。

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

Use ref variable to this ( always a good practice)

使用ref变量（总是一个好习惯）

#3

well if you click a link, and refer to a different page, all running requests for the current page are cancelled...

好吧，如果你点击一个链接，并参考另一个页面，所有当前页面的运行请求都被取消...

this is the expected and wanted behaviour (to prevent unnecessary loading).
if you need a simultaneous loading of two separate pages, you need 2 ajax requests. this means:

这是预期和想要的行为（以防止不必要的加载）。如果您需要同时加载两个单独的页面，则需要2个ajax请求。意即：

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

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

Careful, this does not change the current page, so if your user clicks a different link you gotta do it all over again.

小心，这不会改变当前页面，所以如果你的用户点击不同的链接，你必须重新做一遍。

instead you could speed up the first showing of results, by having your server return a comparably small and thus fast html-page, that directly starts loading data from the server with exactly this construct. something like this should do the trick:

相反，你可以通过让你的服务器返回一个相对较小且因此很快的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>

#1