jquery jak używać wielu ajax zwraca jedną po zakończeniu drugiej

Question

jestem w aplikacji mobilnej i używam wielokrotne Ajax wzywa do odbioru danych z serwera WWW jak poniżej

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

Jak mogę zmusić 2nd ajax zadzwoń, by zacząć po zakończeniu pierwszego ... trzeciego po końcu drugiego i tak dalej?

Answer 1

Umieść je wewnątrz success: tego, na którym się opiera.

$.ajax({ 
    url: 'http://www.xxxxxxxxxxxxx', 
    data: {name: 'xxxxxx'}, 
    dataType: 'jsonp', 
    success: function(data){ 

     // do stuff 

     // call next ajax function 
     $.ajax({ xxx }); 
    } 
}); 

Answer 2

Wrap każdy ajax połączeń w nazwie funkcji i wystarczy dodać je do wywołania zwrotne sukces poprzedniej rozmowy:

function callA() { 
    $.ajax({ 
    ... 
    success: function() { 
     //do stuff 
     callB(); 
    } 
    }); 
} 

function callB() { 
    $.ajax({ 
    ... 
    success: function() { 
     //do stuff 
     callC(); 
    } 
    }); 
} 

function callC() { 
    $.ajax({ 
    ... 
    }); 
} 


callA(); 

Answer 3

Jesteś dość blisko, ale trzeba umieścić swoją funkcję wewnątrz przypadku document.ready obsługujący zamiast odwrotnie.

Połóż wywołanie AJAX w funkcję i wywołać ją z wywołania zwrotnego AJAX:

$(function() { 

    //setup an array of AJAX options, each object is an index that will specify information for a single AJAX request 
    var ajaxes = [{ url : '<url>', dataType : 'json' }, { url : '<url2>', dataType : 'xml' }], 
     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 data from the `ajaxes` array of objects 
      $.ajax({ 
       url  : ajaxes[current].url, 
       dataType : ajaxes[current].dataType, 
       success : function (serverResponse) { 
        ... 
        //increment the `current` counter and recursively call this function again 
        current++; 
        do_ajax(); 
       } 
      }); 
     } 
    } 

    //run the AJAX function for the first time once `document.ready` fires 
    do_ajax(); 
}); 

Answer 4

$(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 

}); 

Answer 5

Można także użyć jQuery kiedy i wtedy funkcje. na przykład

$.when($.ajax("test.aspx")).then(function(data, textStatus, jqXHR) { 
    //another ajax call 
}); 

https://api.jquery.com/jQuery.when/

Answer 6

I Rozważmy następujący być bardziej pragmatyczne, gdyż nie sekwencji wywołań ajax, ale to z pewnością kwestia gustu.

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); 

Teraz można iteracyjne window.ajax_call_count wewnątrz części sukces swoich żądań ajax, aż osiągnie określoną liczbę połączeń Send (window.ajax_calls_completed).

Answer 7

To najbardziej eleganckie rozwiązanie, z którego korzystam od jakiegoś czasu. Nie wymaga zewnętrznej zmiennej licznika i zapewnia przyjemny stopień enkapsulacji.

var urls = ['http://..', 'http://..', ..]; 

function ajaxRequest (urls) { 
    if (urls.length > 0) { 
     $.ajax({ 
      method: 'GET', 
      url: urls.pop() 
     }) 
     .done(function (result)) { 
      ajaxRequest(urls); 
     }); 
    } 
} 

ajaxRequest(urls); 

Answer 8

Możemy po prostu użyć

async: false 

to zrobi swoje potrzeby.