按顺序运行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'); 
     } 
    } 
    }); 
}