如何知道所有ajax调用何时完成

Question

我有一个包含行的表格样式页面.每行都有一个复选框.我可以选择所有/多个复选框,然后单击"提交",每个行的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调用是否完整.原因是想要在所有这些呼叫发生时启用/禁用提交按钮.

谢谢,请注意,由于应用程序的敏感性,我不得不修改我的变量名称,因此很多可能会重复.

Answer 1

简单的方法

最简单的方法是使用.ajaxStop()事件处理程序:

$(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
  }
}

如您所见,我还添加了检查返回错误

Answer 2

一个简洁的解决方案是使用;

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

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

Answer 3

也许:

jQuery.active == 0

偷来自:

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

有关StackOverflow的更多信息:

jQuery.active函数