Question

我从来没有做过这种类型的AJAX调用操作（停止/中止/取消或忽略？在执行新的AJAX调用之前已经运行过AJAX调用）之前我真的不明白这样做，并会欣赏一些方向。

我的应用程序中有一个页面，我在页面加载时进行了大量的AJAX调用以动态填充表格中的数据（对象名称，对象适应，对象进度）。例如，表中有5行。所以我打电话给

$.post("/getFit", {objectId: objectId}, function (result) { manipulation with result  }

和

$.post("/getProgress", {objectId: objectId}, function (result) { manipulation with result  }

循环中每次

5次 - 每个对象一次。

我表格的第一列有关于对象的更多细节的链接，点击它们我称之为另一个AJAX：

 $(document).off('click', '.js_object').on('click', '.js_object', function (e) {
var objectId = $(this).attr("id")         
$.post("/viewObject", {objectId: objectId}, function (result) {document.getElementById("main_window_content").innerHTML = result;   });
    })

问题是浏览器在收到所有先前调用的结果（/ getFit x5和/ getProgress x5）之前不会呈现最后一次AJAX调用（/ viewObject）的结果。

因此，想要深入查看对象详细信息的用户需要等到其他对象的AJAX调用完成才能看到任何内容。

所以我在如何停止/取消/取消（或忽略？）＆＃34; / getProgress＆＃34;和＆＃34; / getFit＆＃34;所以我们可以完全执行＆＃34; / viewObject＆＃34;并查看它的结果。

我非常感谢你的帮助。

Answer 1

使用xhr.abort（）来杀死xhr请求，如下面的JS代码所示。我相信JQuery中有ajax.abort();

 var xhr = $.ajax({
    type: "POST",
    url: "XXX.php",
    data: "name=marry&location=London",
    success: function(msg){
       alert( "The Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

Answer 2

如果你想要一个接一个地执行ajax，并且需要所有requests来显示最终结果，你可以使用.done()：

$.ajax({
    url:'/getFit',
    data:{objectId:objectId}
})
.done(function(data){
//do something with the results then call /getProgress

        $.ajax({
            url:'/getProgress',
            data:{objectId:objectId}
        })
        .done(function(data){
            //do something with the results then call /viewObject
            $.post("/viewObject"....
        })
});

这样，只有在其他人调用成功时才显示/viewObject

在JS中执行新的AJAX之前中止/取消运行AJAX调用

2 个答案: