I am in mobile app and I use multiple Ajax calls to receive data from web server like below
function get_json() {
$(document).ready(function() {
$.ajax({
url: 'http://www.xxxxxxxxxxxxx',
data: {
name: 'xxxxxx'
},
dataType: 'jsonp',
//jsonp: 'callback',
//jsonpCallback: 'jsonpCallback',
success: function(data) {
$.each(data.posts, function(i, post) {
$.mobile.notesdb.transaction(function(t) {
t.executeSql('INSERT into bill (barcode, buildingcode, buildingaddress, flatname, flatdescription, entryseason, period, amount, pastpayments, todaypayments, paydate, receiptno) VALUES (?,?,?,?,?,?,?,?,?,?,?,?);', [post.Id, post.Code, post.Address, post.Name, post.Description, post.EntrySeason, post.Period, post.Revenue, post.PastPayments, post.todaypayments, post.paydate, post.receiptno],
//$.mobile.changePage('#page3', 'slide', false, true),
null);
});
$('#mycontent').append(post.Name);
});
}
});
$.ajax({
xxxx
});
$.ajax({
xxxx
});
});
}
How can I force the 2nd ajax call to begin after the end of the first... the 3rd after the end of the 2nd and so go on?
You could also use jquery when and then functions. for example
$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
//another ajax call
});
Wrap each ajax call in a named function and just add them to the success callbacks of the previous call:
function callA() {
$.ajax({
...
success: function() {
//do stuff
callB();
}
});
}
function callB() {
$.ajax({
...
success: function() {
//do stuff
callC();
}
});
}
function callC() {
$.ajax({
...
});
}
callA();
We can simply use
async: false
This will do your need.
I consider the following to be more pragmatic since it does not sequence the ajax calls but that is surely a matter of taste.
function check_ajax_call_count()
{
if ( window.ajax_call_count==window.ajax_calls_completed )
{
// do whatever needs to be done after the last ajax call finished
}
}
window.ajax_call_count = 0;
window.ajax_calls_completed = 10;
setInterval(check_ajax_call_count,100);
Now you can iterate window.ajax_call_count inside the success part of your ajax requests until it reaches the specified number of calls send (window.ajax_calls_completed).
You are somewhat close, but you should put your function inside the document.ready event handler instead of the other-way-around.
Another way to do this is by placing your AJAX call in a generic function and call that function from an AJAX callback to loop through a set of requests in order:
$(function () {
//setup an array of AJAX options,
//each object will specify information for a single AJAX request
var ajaxes = [
{
url : '<url>',
data : {...},
callback : function (data) { /*do work on data*/ }
},
{
url : '<url2>',
data : {...},
callback : function (data) { /*maybe something different (maybe not)*/ }
}
],
current = 0;
//declare your function to run AJAX requests
function do_ajax() {
//check to make sure there are more requests to make
if (current < ajaxes.length) {
//make the AJAX request with the given info from the array of objects
$.ajax({
url : ajaxes[current].url,
data : ajaxes[current].data,
success : function (serverResponse) {
//once a successful response has been received,
//no HTTP error or timeout reached,
//run the callback for this request
ajaxes[current].callback(serverResponse);
},
complete : function () {
//increment the `current` counter
//and recursively call our do_ajax() function again.
current++;
do_ajax();
//note that the "success" callback will fire
//before the "complete" callback
}
});
}
}
//run the AJAX function for the first time once `document.ready` fires
do_ajax();
});
In this example, the recursive call to run the next AJAX request is being set as the complete callback so that it runs regardless of the status of the current response. Meaning that if the request times out or returns an HTTP error (or invalid response), the next request will still run. If you require subsequent requests to only run when a request is successful, then using the success callback to make your recursive call would likely be best.
Updated 2018-08-21 in regards to good points in comments.
This is the most elegant solution I've been using for a while. It doesn't require external counter variable and it provides nice degree of encapsulation.
var urls = ['http://..', 'http://..', ..];
function ajaxRequest (urls) {
if (urls.length > 0) {
$.ajax({
method: 'GET',
url: urls.pop()
})
.done(function (result)) {
ajaxRequest(urls);
});
}
}
ajaxRequest(urls);
$(document).ready(function(){
$('#category').change(function(){
$("#app").fadeOut();
$.ajax({
type: "POST",
url: "themes/ajax.php",
data: "cat="+$(this).val(),
cache: false,
success: function(msg)
{
$('#app').fadeIn().html(msg);
$('#app').change(function(){
$("#store").fadeOut();
$.ajax({
type: "POST",
url: "themes/ajax.php",
data: "app="+$(this).val(),
cache: false,
success: function(ms)
{
$('#store').fadeIn().html(ms);
}
});// second ajAx
});// second on change
}// first ajAx sucess
});// firs ajAx
});// firs on change
});
Haven't tried it yet but this is the best way I can think of if there umpteen number of ajax calls.
Method1:
let ajax1= $.ajax({url:'', type:'', . . .});
let ajax2= $.ajax({url:'', type:'', . . .});
.
.
.
let ajaxList = [ajax1, ajax2, . . .]
let count = 0;
let executeAjax = (i) => {
$.when(ajaxList[i]).done((data) => {
// dataOperations goes here
return i++
})
}
while (count< ajaxList.length) {
count = executeAjax(count)
}
If there are only a handful you can always nest them like this.
Method2:
$.when(ajax1).done((data1) => {
// dataOperations goes here on data1
$.when(ajax2).done((data2) => {
// Here you can utilize data1 and data 2 simultaneously
. . . and so on
})
})
Note: If it is repetitive task go for method1, And if each data is to be treated differently, nesting in method2 makes more sense.
Source: Stackoverflow.com