调用多个ajax调用

Question

 $.ajax({
        url: "",
        jsonpCallback: 'item',
        contentType: "application/json",
        dataType: 'jsonp',

        success: function(data) {
            console.log(data);
            var markup = "";
            $.each(data.list, function(i, elem) {
                dbInsert(elem['itemCode'], elem['description'], elem['price']);
            });

        },
        error: function(request, error) {
            alert(error);
        }
    });

我有上面类型的不同类型的ajax调用，具有不同的urls。如何一个接一个地运行每个Ajax调用？

Answer 1

跟踪仍然要发送的urls，并让一个ajax请求的成功内联函数调用下一个请求。

var urls = [...];
var runNextAjax = function() {
    var url = urls.pop();
    $.ajax({
        url: url,
        ... other settings, as before ...
        success: function(data) {
           ... do what you want with the data ...
           if (urls.length > 0) runNextAjax();
        },
        error: function(req, err) {
           ... do what you want with the error ...
           if (urls.length > 0) runNextAjax();
        }
    });        
};
// Start the sequence off.
runNextAjax();

上面的代码在数据到达时对其进行操作，如果您希望缓存所有数据并在结束时对其执行操作，请将每个结果存储在一个数组中，然后在一个在结束时调用的函数中处理该数组：

var dataAccumulator = [];
var displayAllData = function() {
    for (int i = 0; i < dataAccumulator.length; ++i) {
        var data = dataAccumulator[i];
        ... process the data into HTML as before ...
    }
};

var urls = [...];
var runNextAjax = function() {
    var url = urls.pop();
    $.ajax({
        url: url,
        ... other settings, as before ...
        success: function(data) {
           // Store the data we received
           dataAccumulator.push(data);
           if (urls.length > 0) runNextAjax();
           else displayAllData();
        },
        error: function(req, err) {
           ... do what you want with the error ...
           if (urls.length > 0) runNextAjax();
           else displayAllData();
        }
    });        
};

// Start the sequence off.
runNextAjax();

Answer 2

你可以做这样的事情。

$('#button').click(function() {
    $.when(
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('one is done')
            }
        }),
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('two is done')
            }
        })
    ).then( function(){
        alert('Final Done');
    });
});

fiddle