Làm thế nào để chờ xử lý thành công ajax để kết thúc trước khi thực hiện một

Question

Tôi có kịch bản sau đây trong javascript của tôi:

1. Ajax tải một kỷ lục.
2. Dựa trên giá trị trở lại của kỷ lục đó, một cuộc gọi ajax lấy một dạng html mà được thêm vào DOM
3. Khi # 2 hoàn tất, hồ sơ mà được lấy từ # 1 sau đó được nạp vào biểu mẫu được tạo trong # 2.

Tôi đang sử dụng when để khi # 2 hoàn tất, tôi có thể tải các giá trị biểu mẫu từ # 1. Vấn đề là, có vẻ như khi không đợi trình xử lý thành công kết thúc, chỉ có cuộc gọi ajax. Tôi cần phải đợi cho hàm thành công của # 2 để hoàn thành (vì đây là những gì tạo ra biểu mẫu trong DOM) trước khi tôi có thể tiếp tục tải biểu mẫu với các giá trị.

Nếu tôi thêm một alert1 ở bướC# 2, nó hoạt động (mà tôi đoán là bởi vì nó đang chờ đợi cảnh báo để được bấm, và trong thời gian đó, xử lý thành công đã kết thúc.

Answer 1

Đỗ một cái gì đó như thế này, nơi bạn sử dụng chức năng lồng nhau trong success callback:

$.ajax({ 
    url: "somewhere" 
    success: function(data1){ 
     //Use data1 to determine ajax request #2 
     $.ajax({ 
      url: "somewhere else" 
      success: function(data2){ 
       //Do stuff with data1 and data2 
      } 
     }); 
     } 
}); 

Answer 2

bạn có thể dùng những lời hứa jQuery, ví dụ:

var loadingData = $.get(loadDataUrl); 
var loadingHtml = $.get(grabHtmlUrl); 
$.when(loadingData, loadingHtml).done(function(loadDataResult, loadHtmlResult){ 
    //add the html to the dom 
    //use data to update the dom as you please  
}); 

Lưu ý: $ .g et chỉ là một phiên bản của $ .ajax mà thực hiện một yêu cầu get

Nguồn: http://api.jquery.com/deferred.promise/

http://api.jquery.com/jquery.get/

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/jquery.when/

Answer 3

Bạn nên sử dụng when hoặc success không phải cả hai. Nó có vẻ như (mặc dù các mẫu mã sẽ làm cho điều này rõ ràng hơn) bạn đang gắn hai trình lắng nghe riêng biệt vào cuộc gọi ajax, nhưng bạn chỉ muốn một để thực hiện sau khi khác.
Tôi muốn một trong hai cuộn cả hai vào một sự kiện như:

$.ajax(... , function(){ 
    // success 
    // prep stuff here 
    $.ajax(... , function(){ 
     // second success 
     // do final stuff here 
    }); 
}); 

Hoặc quấn bạn ajax gọi bên trong lời hứa khác (điều này có thể yêu cầu đọc thêm một chút xung quanh những lời hứa jQuery).

Nhưng nếu bạn làm điều gì đó như

$.when($.ajax(... , function(){ 
    // thing a 
}).then(function(){ 
    // thing b 
}); 

Thing a và b sẽ thực hiện cùng một lúc, bởi vì chúng được thiết kế cho khá nhiều điều tương tự.

Answer 4

Bit muộn để trả lời, nhưng

Tốt hơn nhiều cách là sử dụng những lời hứa như cách họ designed to be used

Pseudo thực hiện

var promise = $.ajax({ 
    url: url, 
    data: data 
}).done(function (data) { 
    var result = process(data); 
    return $.ajax({ 
     url: url, 
     data: result 
    }); 
}).done(function (data) { 
    // data is the result of second ajax call 
});