【问题标题】：How to know when all ajax calls are complete如何知道所有ajax调用何时完成
【发布时间】：2008-11-13 15:12:26
【问题描述】：

我有一个带有行的表格样式页面。每行都有一个复选框。我可以选择所有/许多复选框并单击“提交”，所做的是对每一行进行 Jquery ajax 调用。

基本上我每行都有一个表单，我遍历所有检查的行并提交执行 jquery ajax 调用的表单。

所以我有一个按钮：

       $("input:checked").parent("form").submit();

那么每一行都有：

            <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
                <input type="checkbox" name="X" value="XChecked"/>
                <input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/>
                <input type="hidden" name="X" value="rXChecked"/>
            </form>

此表单提交给 processRow：

   function processRow(rowNum)
   {
        var Amount = $('#XAmt'+rowNum).val();
        var XId = $('#XId'+rowNum).val();
        var XNum = $('#OrderNumber'+rowNum).val();
        var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId;


        $('#coda_'+rowNum).removeClass("loader");
        $('#coda_'+rowNum).addClass("loading");


        $.ajax({
          url: "x.asp",
          cache: false,
          type:  "POST",
          data:  queryString,
          success: function(html){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");
          }
        });
   }

我想知道的是，有没有一种方法可以判断我的所有 Ajax 调用是否已完成。原因是希望在所有这些调用发生时启用/禁用提交按钮。

谢谢，请注意，由于应用程序的敏感性，我不得不修改我的变量名，所以其中很多可能是重复的。

【问题讨论】：

虽然检测所有 ajax 调用何时完成对于任何设计都有价值，但我认为更好的整体解决方案是一次提交多行。在某些方面，将每一行作为单独的 ajax 帖子发送在系统上会真的困难，并且不是（在我看来）最好的设计。我什至会说我保证有一天，如果你坚持这种每行一个ajax调用的设计，你会后悔的。
除了@ErikE 指出的设计问题，我很惊讶没有人提到使用 Promises 来回答原始问题。

标签： jquery ajax

【解决方案1】：

简单的方法

最简单的方法是使用.ajaxStop() event handler：

$(document).ajaxStop(function() {
  // place code to be executed on completion of last outstanding ajax call here
});

艰难的路

您还可以手动检测是否有任何 ajax 调用仍然处于活动状态：

创建一个包含活动 Ajax 连接数的变量：

var activeAjaxConnections = 0;

就在打开新的 Ajax 连接之前增加该变量

$.ajax({
  beforeSend: function(xhr) {
    activeAjaxConnections++;
  },
  url (...)

在success 部分检查该变量是否等于零（如果是，则最后一个连接已完成）

success: function(html){
  activeAjaxConnections--;
  $('#result_'+rowNum).empty().append(html);
  $('#coda_'+rowNum).removeClass("loading");
  $('#coda_'+rowNum).addClass("loader");
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
},
error: function(xhr, errDesc, exception) {
  activeAjaxConnections--;
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
}

如您所见，我还添加了检查是否返回错误

【讨论】：

ajaxStop 处理程序被触发后如何再次删除它？
stackoverflow.com/questions/3709597/…
关于“艰难的方式”：不需要维护变量，Jquery 已经这样做了：$.active 保持当前活动 ajax 调用的数量
注意 beforesend 应该是 beforeSend
如果同时有多个调用，有什么方法可以确定它是哪个 Ajax 调用？

【解决方案2】：

一个巧妙的解决方案是使用；

$("body").ajaxStop(function() {
    //Your code
});

有关更多信息，请查看http://api.jquery.com/ajaxStop/ 处的 jQuery .ajaxStop 函数

【讨论】：

【解决方案3】：

也许：

jQuery.active == 0

盗自：

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

有关 StackOverflow 的更多信息：

jQuery.active function

【讨论】：

【解决方案4】：

直接使用 if 怎么样？

success: function(html){
   if(html.success == true ){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");

          }
   }

【讨论】：