jQuery等待异步Ajax调用完成

Question

嗨，我的脚本中有两个ajax调用，我需要它们异步运行以节省时间，但是我需要第二个调用等待第一个完成后再执行。

$.ajax({
    type: "POST",
    url: "getText.asmx/ws_getText",
    data: parO1,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        alert(msg.d.data);
    }, 
    error: function () {
        chyba("chyba v požadavku", "df");
    }
});

if (parO2.length > 0) {
    $.ajax({
        type: "POST",
        url: "getText.asmx/ws_getText",
        data: parO2,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            /*WAIT UNTIL THE FIRST CALL IS FINISHED AND THAN DO SOMETHING*/
        },
        error: function () {
            chyba("chyba v požadavku", "df");
        }
    });
}

有什么想法吗？谢谢

- user1352324

Answer 1

如果您使用的是 jQuery 1.5+ 版本，您可以使用 jQuery.when() 来实现此操作。类似于以下代码（为了简洁起见缩短了 ajax 调用，只需像上面一样传递对象即可）。

$.when($.ajax("getText.asmx/ws_getText"), 
       $.ajax("getText.asmx/ws_getText")).done(function(a1,  a2){

   // a1 and a2 are arguments resolved for the 
   // first and second ajax requests, respectively
   var jqXHR = a1[2]; // arguments are [ "success", statusText, jqXHR ]
});

你不知道它们将以什么顺序返回，因此如果需要手动处理此项任务，你需要检查其他请求的状态并等待其返回。

- Russ Cam

Answer 2

你需要将第二个调用的代码嵌套在第一个ajax调用的回调函数中。像这样：

success: function(msg)
{
    alert(msg.d.data);

    if(par02.length > 0)
    {
        // Your 2nd ajax call
    }
},

由于 JavaScript 在客户端上不会运行多个线程，因此您无法阻止线程直到满足某些条件为止。

- Tejs

---

但这会使执行时间变长，因为第二个调用将在第一个完成后启动，我正在考虑这样的事情：在第一次调用成功时，我可以将某些变量设置为true，在第二次调用成功时，我可以使用while(variable==false){wait}，然后继续，但我不知道如何正确编写它。 - user1352324

唯一的“等待”方法是使用 setTimeout，然后检查您的全局变量。但从技术上讲，这意味着您的超时可能会在调用完成后发生，但仍在等待。最好向用户展示一个旋转的 gif 或其他东西来指示服务器正在工作。 - Tejs

Answer 3

使用jQuery。

$.ajax({
        type: "POST",
        async:false, // ** CHANGED **
        url: "getText.asmx/ws_getText",
        data: parO1,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d.data);
        }
        , error: function () {
            chyba("chyba v požadavku", "df");
        }
    });

- user3673557

---

感谢您的回答。我通过添加一些代码格式来提高可读性进行了编辑。 - vlasits

@vlasits，这似乎并没有使它变成粗体，我提交了一份带有注释的编辑以解释发生了什么。 - flyingfisch

Answer 4

这里有另一个关于运行双重ajax请求的答案。像Tejs一样，用户在成功方法中进行了ajax调用...

发帖者表示最好让成功方法启动一个新的ajax请求.."

在一个脚本中有两个$.ajax()调用

- latoyale