Reputation: 2299
I am using jQuery 1.11 but what if I want to do several Ajax requests after eachother where they need to wait for eachother, is the only solution then to nest them like this:
// Ajax #1 -------------------------------
$.ajax({
dataType: "json",
url: "index.json",
data: { urlVar1:val1,urlVar2:val2},
success: function(data1) {
// stuff for Ajax #1 ...
// Ajax #2 ---------------------------
$.ajax({
dataType: "json",
url: "index.json",
data: { urlVarA:data1-val1,urlVarB:data1-val2},
success: function(data2) {
// stuff for Ajax #2 ...
// Ajax #3 -----------------------
$.ajax({
dataType: "json",
url: "index.json",
data: { urlVarX:data2-val1,urlVarY:data2-val2},
success: function(data3) {
// stuff for Ajax #3 ...
} // $.ajax.success #3
}); // $.ajax #3 -----------------
} // $.ajax.success #2
}); // $.ajax #2 ---------------------
} // $.ajax.success #1
}); // $.ajax #1 -------------------------
In real-life practice I need Ajax #1
to fetch a number of groups... Ajax #2
should process those groups and get subgroups and Ajax #3
should get individual lines from these subgroups.
In theory I could probably do these 3 Ajax calls with one call but this is just as much to get the understanding on how this can be done as I think the nested approach quickly gets too messy in my code.
Upvotes: 1
Views: 197
Reputation: 95054
.then will make this much cleaner.
// Ajax #1 -------------------------------
$.ajax({
dataType: "json",
url: "index.json",
data: { urlVar1:val1,urlVar2:val2}
}).then(function(data1){
// Ajax #2 ---------------------------
return $.ajax({
dataType: "json",
url: "index.json",
data: { urlVarA:data1-val1,urlVarB:data1-val2}
});
}).then(function(data2) {
// stuff for Ajax #2 ...
// Ajax #3 -----------------------
return $.ajax({
dataType: "json",
url: "index.json",
data: { urlVarX:data2-val1,urlVarY:data2-val2}
});
}).then(function(data3) {
console.log(data3);
}).fail(function(){
console.log("something happened...",arguments);
console.log(this.url)
});
Upvotes: 2
Reputation: 131
Maybe you can try this:
$.when( $.getJSON('index.json', { urlVar1 : val1, urlVar2 : val2 }),
$.getJSON('index.json', { urlVarA : data1-val1, urlVarB : data1-val2 }),
$.getJSON('index.json', { urlVarX : data2-val1, urlVarY : data2-val2 })
).then(function(data1, data2, data3){
console.log(data1);
console.log(data2);
console.log(data3);
});
Upvotes: 0