web-dev-qa-db-ja.com

Ajax呼び出しが完了した後に関数を実行する

私はAjaxを初めて使用し、forループを使用しながらAjaxを使用しようとしています。 Ajax呼び出しの後、Ajax呼び出しで作成された変数を使用する関数を実行しています。関数は2回だけ実行されます。 Ajax呼び出しは、ループが最初から始まる前に呼び出しを行うのに十分な時間がない可能性があると思います。関数printWithAjax()を実行する前にAjax呼び出しを確認する方法はありますか? Ajax呼び出しが完了するまでprintWithAjax()関数を実行したくありません。どんな助けも大歓迎です。

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
35
stat8

このコードを試してください:

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の「成功」後にのみ実行されます。そのため、「complete」でprintWithAjax()を呼び出してみてください。これはあなたのために働くはずです。

51

.ajaxStop() または .ajaxComplete() を使用できます

.ajaxComplete()は、ページ上の各AJAXリクエストの完了後に起動します。

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

.ajaxStop()は、ページ上のすべてのAJAXリクエストの完了後に起動します。

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

.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
10
Geo

Headでasync = falseを設定する必要があります。 ajaxの代わりにpost/getを使用します。

jQuery.ajaxSetup({async:false});

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

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

        }
    });
0
Phong Ca

試してみる

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