等待另一个Ajax Call响应的Ajax Call? [英] Ajax Call waiting for the response of another Ajax Call?

问题描述

我有两个无法在一个调用中完成的ajax调用.当第一个ajax调用开始时，第二个ajax调用可以立即开始，也可以在用户按下发送按钮时开始.如果第二个ajax调用开始，则他必须等待第一个ajax调用的响应，因为他需要从中获取数据.

I have two ajax call that cannot be done in one call. When the first ajax call starts the second ajax call can start immediately or whenever the user presses a send button. If the second ajax call starts he has to wait for the response of the first ajax call because he needs data from it.

我如何才能实现第二个ajax调用仅在第一个ajax调用的响应到达后才发送他的请求?

How can I achieve that the second ajax call sends his request only after the first ajax call's response has been arrived?

• 除了setTimeout以外，还有其他方法吗?
• 我可以通过某种方式在ajax调用1上注册ajax调用2的侦听器吗?

我的代码是:

var xhrUploadComplete = false;

// ajax call 1
$.ajax({
url: url,
type: "POST",
data: formdata,
processData: false,
contentType: false,
complete: function(response) {
    var returnedResponse = JSON.parse(response.responseText);
    xhrUploadComplete = true;
}
});

// ajax call 2
if (xhrUploadComplete) {
  $.ajax({
  url: url2,
  type: "POST",
  data: formdata2,
  processData: false,
  contentType: false,
  complete: function(response) {
    ...
  }
  });
}

第二个ajax调用不能发布到第一个调用的done()或complete()中，因为它取决于用户选择发送最终表单.这两个步骤的目的是在用户将图像插入输入type = file之后将其发送到服务器.

The second ajax call cannot be posted in done() or complete() of the first call, because it depends on the users choice to send the final form. The purpose of this two step process is to send an image to the server just after the user had inserted it to an input type=file.

知道我不能使用if(..)，因为这是一个异步调用.我写它是为了清楚我需要做什么.我想我需要Java的未来.

In know that I cannot the the if(..) because this is an async call. I wrote it to make clear what I need to do. I think I need something like a future in Java.

推荐答案

xhrUploadComplete将异步设置为true(将来，当请求完成时)，这样您的if-条件(即被评估在请求开始后立即执行)将永远无法实现.您不能简单地 return(或设置)来自ajax调用.而是将等待结果的代码移到本应设置/返回变量的处理程序中:

xhrUploadComplete will be set to true asynchronously (in the future, when the request has finished) so your if-condition (that is evaluated right after the request is started) will never be fulfilled. You cannot simply return (or set) a value from an ajax call. Instead, move the code that waits for the results into the handler that would have set/returned the variable:

$.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    complete: function(response) {
        var returnedResponse = JSON.parse(response.responseText);
        $.ajax({
            url: url2,
            type: "POST",
            data: formdata2,
            processData: false,
            contentType: false,
            complete: function(response) {
                …
            }
        });
    }
});

使用Promise模式，您可以更优雅地组合它们:

With the Promise pattern you can compose those even more elegantly:

$.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false
}).then(function(response) {
    var returnedResponse = JSON.parse(response.responseText);
    return $.ajax({
        url: url2,
        type: "POST",
        data: formdata2,
        processData: false,
        contentType: false
    });
}).done(function(response) {
    // result of the last request
    …
}, function(error) {
   // either of them failed
});

也许您还需要这个:

var ajax1 = $.ajax({
    url: url, …
}).then(function(response) {
    return JSON.parse(response.responseText);
});
$(user).on("decision", function(e) { // whatever :-)
    // as soon as ajax1 will be or has already finished
    ajax1.then(function(response1) {
        // schedule ajax2
        return $.ajax({
             url: url2, …
        })
    }).done(function(response) {
        // result of the last request
        …
    }, function(error) {
        // either of them failed
    });
});

这篇关于等待另一个Ajax Call响应的Ajax Call?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！