jquery how to use multiple ajax calls one after the end of the other

Question

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

User · Answer

We can simply use   async  false    This will do your need

User · Answer

You could also use jquery when and then functions  for example      when    ajax   test aspx      then function  data  textStatus  jqXHR         another ajax call       https   api jquery com jQuery when

User · Answer

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    gt         when ajaxList i   done  data    gt              dataOperations goes here       return i           while  count lt  ajaxList length       count   executeAjax count      If there are only a handful you can always nest them like this   Method2     when ajax1  done  data1    gt              dataOperations goes here on data1         when ajax2  done  data2    gt                 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

User · Answer

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

User · Answer

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

User · Answer

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          lt url gt                    data                              callback   function  data      do work on data                                                  url          lt url2 gt                    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  lt  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

User · Answer

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

User · Answer

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  gt  0              ajax               method   GET               url  urls pop                       done function  result                 ajaxRequest urls                        ajaxRequest urls

User · Answer

Place them inside of the success  of the one it relies on     ajax       url   http   www xxxxxxxxxxxxx       data   name   xxxxxx        dataType   jsonp       success  function data               do stuff             call next ajax function           ajax   xxx

[jquery] jquery how to use multiple ajax calls one after the end of the other

Examples related to jquery

Examples related to function

Examples related to get

Examples related to jsonp