按順序運行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請求，其他請求在前一個請求完成後開始。

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'); 
     } 
    } 
    }); 
}