Geek asks and answers

How to do another jquery thing after some jquery ajax

I am using PHP. I want to end the jQuery AJAX process (end the process even after the data returns to the main page ).

Then do the following jQuery thing. Any ideas on how to do this?

$.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');
+3
source share
3 answers

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

So your code will 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 () {

});
+12
source

ajax, - :

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 */ });

ajax.

+2

For the record only, so here should also be the pre-jQuery-1.5 answer:

$.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 illustrates the meaning of the new jQuery 1.5 method :-)

+1
source

More articles:


All Articles