オーダーごとにajaxリクエストを実行

Question

forループでajaxをオーダー別に送信するにはどうすればよいですか？ここに私のコードは次のとおりです。

function ajax_sent(i, btn){ 
    jQuery.ajax({ 
     url : ln_ajax_handle.ajax_url, 
     type : 'post', 
     data : { 
      action : 'ln_ajax_handle', 
      main_data : i 
     }, 
     success : function(result){ 
      jQuery('#ln-modal-bangchinh').append(result); 
      if(i === 5){ 
       btn.button('reset'); 
       jQuery('#ln-content-modal').modal('show'); 
      } 
     } 
    }); 
} 

jQuery(document).ready(function(){ 
    jQuery('.ln-update').click(function(){ 
     var btn = jQuery(this); 
     btn.button('loading'); 

     for(var i = 1; i <= 5; ++i){ 
      ajax_sent(i, btn); 
     } 
    }); 
}); 

そして、ここでは簡単なPHPのテスト関数である：

function ln_ajax_handle(){ 
    $data = $_POST['main_data']; 

    echo ln_alert_test($data); 

    wp_die(); 
} 

function ln_alert_test($data){ 
    ob_start(); 
    ?> 
    <div class="alert"> 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
     <strong>Success!</strong> The loop run by <?php echo $data; ?> times; 
    </div> 
    <?php return ob_get_clean(); 
} 

PHPファイルでは、私は簡単なテストを取得するためにechoを使用しています。しかし、結果は数字が画像のような順序で並べられていないことです。 。私はi = 1が欲しいときに、サーバーから応答を受けると、i = 2が実行されます。次の進歩は同じです。これを行う方法は？

Answer 1

ajaxリクエストをチェーンする必要があります。これは、前のリクエストが終了した後に他のリクエストが開始されるようにします。 AJAXは非同期であるため、前のAJAX呼び出しのコールバックでのAJAX呼び出しを行う場合を除き

var i = 1, 
    fn = function() { 
    i <= 5 && ajax_sent(++i, btn, fn); 
    }; 

ajax_sent(i, btn, fn); 

// add a callback cb to be called on success 
function ajax_sent(i, btn, cb) { 
    jQuery.ajax({ 
    url: ln_ajax_handle.ajax_url, 
    type: 'post', 
    data: { 
     action: 'ln_ajax_handle', 
     main_data: i 
    }, 
    success: function(result) { 
     // if a callback was provided call it 
     cb && cb(); 
     jQuery('#ln-modal-bangchinh').append(result); 
     if (i === 5) { 
     btn.button('reset'); 
     jQuery('#ln-content-modal').modal('show'); 
     } 
    } 
    }); 
}