Ajax调用完成后执行函数

Posted 2023-02-22

【中文标题】Ajax调用完成后执行函数

【英文标题】：Execute function after Ajax call is complete

【发布时间】：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 请求。你也可以循环遍历数据来控制它的显示。

【参考方案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 调用成功/失败，都会执行完整的回调

错了！每次调用完成***.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