多个AJAX调用完成后如何通知

时间:2015-06-03 16:18:10

标签: jquery ajax

我的页面上有3个ajax调用。第二个ajax调用将调用第一个和第三个ajax调用成功调用第二个成功。每个响应都返回多个记录,因此我必须进行一个while循环来遍历每个记录并进行相应的AJAX调用。我需要将数据从while循环传递给后续的AJAX调用。

我想打开控制台,如:



First
Second
Third

First
Second
Third

First
Second
Third

All Asyc Call complete




然而,它正在向我展示



First
First
First

All Asyc Call complete

Second
Second
Second

Third
Third
Third






// First Ajax Call
$.ajax({
  
  success: function(response1) {
    
    while(response1.next()) {
    
      console.log("First");
      
      // Second Ajax Call
      $.ajax({
        
        success: function(response2){
          
          while(response2.next()) {
          
            console.log("Second");
            
            // Third Ajax Call
            $.ajax({
              
              success: function(response3){
              
                while(response3.next()) {
                  console.log("Third");
                }
                
              }
              
            })
            
            
          }
        
        }
        
      })
    
    }
      
      
  }

})
console.log("All Asyc call completes");




1 个答案:

答案 0 :(得分:3)

您可以这样做:

$(document).ajaxSuccess(function() {
    if( ajax_sucess_counter == 3 ) alert('the 3 ajax calls are completed');
});

var ajax_sucess_counter = 0;

$.ajax({
    //...
    success: function(){
        // ...
        ajax_sucess_counter++;
    }
});

使用延迟对象:

$.when( $.ajax('call1.php'), $.ajax('call2.php'), $.ajax('call3.php') ).done(function() {
      alert('the 3 ajax calls are completed');
}});

您可以在jQuery Docs获得所有信息和更多示例。