Question

下面有两个ajax调用是在用户点击按钮打开图库时生成的：

              // Get the sub-folders and their position 
$.post('ajax.php', {op : 'get_folders'},       
                           function() {  
                                       . . .
                           });

             // Get the gallery thumbs

$("#galleryContent").load("ajax.php", 
                           {op : 'get_thumbs' 
                           },
                           function() {  
                                . . .                 
                            });

在完成第一个ajax调用之前启动第二个ajax调用并不好，所以我认为我需要使用.when（）,. done（）或.then（）以某种方式同步这些调用，但没有一个简单的解决方案是退出延期文档。有人看到一个简单的方法吗？我不需要将第一次调用中的任何变量传递给第二次调用。我只想推迟第二次，直到第一次完成。

由于

Answer 1

我能想到的最简单的是：

//make the second ajax call
$("#galleryContent").load("ajax.php",{op : 'get_thumbs' }, function() {  
    //. . .
    //once it successfully completes, make the first ajax call
    $.post('ajax.php', {op : 'get_folders'}, function() {  
         //. . .
    });             
});

Answer 2

就像你说的那样，有两个词：什么时候完成。

$.when(ajax1()).done(function()
{
    ajax2();
});

并且您必须为任何ajax请求返回jqXHR对象

function ajax1()
{
    return $.post({...});
}

Answer 3

尝试

var f1 = function () {
    return $.post("ajax.php", {op : "get_folders"});
}
, f2 = function () {
    var dfd = new $.Deferred();
    $("#galleryContent")
        .load("ajax.php", {
            op : "get_thumbs"
    }, function (data, textStatus, jqxhr) {
        dfd.resolve(data, textStatus, jqxhr)
    });
    return dfd.promise()
}
, requests = [f1, f2]
, request = function (arr) {
    return $.when(arr[0]())
        .then(function (data, textStatus, jqxhr) { // `done` callbacks
           console.log(
             typeof data === "string" 
             ? data : data[0]
             , textStatus, jqxhr
           );
           if (arr.length !== 1) {
              arr.shift();
              request(arr)
           }
        }, function (jqxhr, textStatus, errorThrown) { // `fail` callbacks
            console.log(jqxhr, textStatus, errorThrown)
        })
};

request(requests);

jsfiddle http://jsfiddle.net/guest271314/ruoq3kf5/

Answer 4

$ .ajax和$ .post支持失败/成功等事件，当它们成功完成或失败时触发，只需调用下一个ajax然后..就像这样：

            $.ajax({
                url: 'someurl',
                type: "POST"
            }).success(function (data, textStatus, jqXhr) {
                // ajax call is done, do another one
                $.ajax({
                    url: 'someurl',
                    type: "POST"
                }).success(function (data2, textStatus2, jqXhr2) {
                    // 2nd ajax call is done
                }).error(function (jqXhr2, testStatus2, errorThrown2) {
                    // ajax call error, alert user!
                });
            }).error(function (jqXhr, testStatus, errorThrown) {
                // ajax call error, alert user!
            });

串行执行两个ajax调用

4 个答案: