Ajax调用完成后执行函数答案

【问题标题】：Execute function after Ajax call is completeAjax调用完成后执行函数
【发布时间】：2014-06-10 14:05:15
【问题描述】：

我是 Ajax 新手，我正在尝试在使用 for 循环时使用 Ajax。在 Ajax 调用之后，我正在运行一个函数，该函数使用在 Ajax 调用中创建的变量。该函数只执行两次。我认为 Ajax 调用可能没有足够的时间在循环开始之前进行调用。有没有办法在运行 printWithAjax() 函数之前确认 Ajax 调用？ 我不希望 printWithAjax() 函数在 Ajax 调用完成之前执行。 任何帮助将不胜感激。

var id;
var vname;
function ajaxCall(){
for(var q = 1; q<=10; q++){
 $.ajax({                                            
         url: 'api.php',                        
         data: 'id1='+q+'',                                                         
         dataType: 'json',
         async:false,                    
         success: function(data)          
         {   
            id = data[0];              
            vname = data[1];
         }
      });

       printWithAjax(); 

 }//end of the for statement
}//end of ajax call function

【问题讨论】：

由于您使用的是asycn:false(如果可能的话，永远不要使用它)，打印只会在ajax完成后执行......跨度>
但正确的解决方案是在成功回调中调用 print 函数并将 id 和 vname 作为参数传递
所以你想让 printWithAjax 为每个 ajax 调用触发一次？
like jsfiddle.net/arunpjohny/yA8Zu/2 - 你是否也想确保ajax请求按顺序执行，如果没有你可以删除async:false
既然您只是传递数字 1 - 10，为什么不将一个数组或范围 (1-10) 传递给您的服务器并只进行一次 ajax 调用呢？而不是发出 10 个 ajax 请求。你也可以循环遍历数据来控制它的显示。

标签： javascript jquery ajax json

【解决方案1】：

试试这个代码：

var id;
var vname;
function ajaxCall(){
for(var q = 1; q<=10; q++){
 $.ajax({                                            
     url: 'api.php',                        
     data: 'id1='+q+'',                                                         
     dataType: 'json',
     async:false,                    
     success: function(data)          
     {   
        id = data[0];              
        vname = data[1];
     },
    complete: function (data) {
      printWithAjax(); 
     }
    });

  }//end of the for statement
  }//end of ajax call function

“完成”函数只有在ajax“成功”后才会执行。所以尝试在“完成”时调用 printWithAjax()。这应该适合你。

【讨论】：

无论 ajax 调用成功/失败，都会执行完整的回调
错了！每次调用完成stackoverflow.com/a/42229704
"async:false" 为我工作。非常感谢。

【解决方案2】：

您可以使用.ajaxStop() 或.ajaxComplete()

.ajaxComplete() 在您页面上的每个 AJAX 请求完成后触发。

$( document ).ajaxComplete(function() {
  yourFunction();
});

.ajaxStop() 在您页面上的所有 AJAX 请求完成后触发。

$( document ).ajaxStop(function() {
  yourFunction();
});

【讨论】：

不，ajaxComplete 被提早执行，实际上没用。

【解决方案3】：

将 .done() 添加到您的函数中

var id;
var vname;
function ajaxCall(){
for(var q = 1; q<=10; q++){
 $.ajax({                                            
         url: 'api.php',                        
         data: 'id1='+q+'',                                                         
         dataType: 'json',
         async:false,                    
         success: function(data)          
         {   
            id = data[0];              
            vname = data[1];
         }
      }).done(function(){
           printWithAjax(); 
      });



 }//end of the for statement
}//end of ajax call function

【讨论】：

完成与success 相同。你想要".always()"
@MichelAyres 我认为只有成功才会成功，并且无论如何都会运行......
run no matter what == .always() 看看jQuery.ajax handling continue responses: “success:” vs “.done”? 还有"An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success()"

【解决方案4】：

将 .done() 附加到您的 ajax 请求中。

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() { //use this
  alert("DONE!");
});

查看JQuery Doc.done()

【讨论】：

【解决方案5】：

你应该在 head 中设置 async = false。使用 post/get 代替 ajax。

jQuery.ajaxSetup({ 异步：假 });

    $.post({
        url: 'api.php',
        data: 'id1=' + q + '',
        dataType: 'json',
        success: function (data) {

            id = data[0];
            vname = data[1];

        }
    });

【讨论】：

【解决方案6】：

试试

var id;
var vname;
function ajaxCall(){
for(var q = 1; q<=10; q++){
 $.ajax({  

 url: 'api.php',                        
 data: 'id1='+q+'',                                                         
 dataType: 'json',
 success: function(data)          
  {

    id = data[0];              
   vname = data[1];
   printWithAjax();
}
      });



}//end of the for statement
  }//end of ajax call function

【讨论】：