I am using PHP. I want finish the jQuery AJAX process, (finish process and after data back to the main page) .

Then do the next jQuery thing. Any ideas on how to do it?

$.ajax({
  url: "page1.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax1
$.ajax({
  url: "page2.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax2
$.ajax({
  url: "page3.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax3

// finish all the 3 ajax process, do the below code
$(".page").css('display','block');

I am using PHP. I want finish the jQuery AJAX process, (finish process and after data back to the main page) .

Then do the next jQuery thing. Any ideas on how to do it?

$.ajax({
  url: "page1.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax1
$.ajax({
  url: "page2.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax2
$.ajax({
  url: "page3.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax3

// finish all the 3 ajax process, do the below code
$(".page").css('display','block');

• javascript
• jquery
• jquery-deferred

3 Answers 3

If you are using jQuery 1.5 or better, you can use the heavenly $.when construct, which uses the $.Deferred concept first implemented in that version of jQuery. You can run a function (or several functions) when all of several AJAX requests have pleted.

So your code would look like this:

$.when($.ajax({
    url: "page1.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
}), $.ajax({
    url: "page2.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
}), $.ajax({
    url: "page3.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
})).then(function () {

});

If you have an arbitrary number of ajax operations, you can do something like this:

var arr = [];
arr.push($.ajax(...));
arr.push($.ajax(...));
/* put as many ajax operations as you want into arr */
$.when.apply(arr).then(function() { /* on success */ },
                       function() { /* on error */ });

This is my favorite technique for synchronizing multiple ajax calls.

Just for the record so that the pre-jQuery-1.5 answer is here, too:

$.ajax({
  url: "page1.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    $.ajax({
      url: "page2.php", 
      dataType: "html",
      type: 'POST', 
      data: "value=" + value, 
      success: function(data){
        $.ajax({
          url: "page3.php", 
          dataType: "html",
          type: 'POST', 
          data: "value=" + value, 
          success: function(data){
            // finish all the 3 ajax process, do the below code
            $(".page").css('display','block');
          }
        });//ajax3
      }
    });//ajax2
  }
});//ajax1

Hopefully, if nothing else this illustrates the value of the new jQuery 1.5 way of doing things :-)