如何知道所有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() event handler：

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

难的方法

您也可以手动检测是否所有Ajax调用仍然有效：

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

var activeAjaxConnections = 0; 

刚刚开放这个变量 在success部分检查

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

如果该变量等于零（如果是的话，最后的连接已完成）新的Ajax连接增量

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 
}); 

欲了解更多信息，请查看jQuery。在http://api.jquery.com/ajaxStop/

Answer 3

也许ajaxStop功能：

jQuery.active == 0 

被盗来源：

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

更多信息StackOverflow上：

jQuery.active function

Answer 4

如何只简单地使用if？

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

      } 
    }