Ajax呼叫等待另一個Ajax呼叫的響應？

Question

我有兩個ajax調用不能在一個調用中完成。當第一個Ajax調用開始時，第二個Ajax調用可以立即開始，或者當用戶按下發送按鈕時。如果第二個Ajax調用開始，他必須等待第一個Ajax調用的響應，因爲他需要來自它的數據。

如何才能實現第二個Ajax調用只有在第一個Ajax調用的響應到達後才發送他的請求？

• 是否有另一種方法比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調用不能在第一次調用的（）完成或完成（）上公佈，因爲這取決於用戶的選擇來發送最終形式。這兩步過程的目的是在用戶將其插入輸入類型=文件後，將圖像發送到服務器。

編輯：在知道我不能的if（..），因爲這是一個異步調用。我寫了它來明確我需要做什麼。我想我需要Java中的未來。

Answer 1

xhrUploadComplete將被設置爲true異步（在未來，當請求已完成），所以您的if -condition（即評估的請求啓動後右）將永遠不會實現。你不能簡單地return (or set) a value from an ajax call。相反，移動是等待結果到處理程序會設置代碼/返回的變量：

$.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) { 
       … 
      } 
     }); 
    } 
}); 

隨着無極模式，你甚至可以更優雅的撰寫者：

$.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 
    }); 
});