jQuery的如何使用多個AJAX的其他

Question

我在移動應用程序結束後要求之一，我使用多個Ajax調用以接收來自Web服務器的數據像下面

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

我怎樣才能迫使第二阿賈克斯打電話在第一個結束後開始......第二個結束後的第三個開始，繼續進行下去？

Answer 1

將它們放在它所依賴的success:的內部。

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

     // do stuff 

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

Answer 2

裹在一個名爲函數中的每個AJAX調用，只需將它們添加到以前的調用成功回調：

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

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

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


callA(); 

Answer 3

你是有點接近，但你應該把你的功能document.ready事件中處理程序而不是其他方式。

把你的AJAX調用的函數，從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

你也可以使用jQuery的時候，然後功能。例如

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

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

Answer 6

我認爲下面幾點是比較務實的，因爲它不測序Ajax調用，但是這確實是一個口味的問題。

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

現在，您可以將您的Ajax請求的成功部分內重複window.ajax_call_count直到它到達發送（window.ajax_calls_completed）調用指定數量。

Answer 7

這是我一直使用的最優雅的解決方案。它不需要外部計數器變量，它提供了很好的封裝程度。

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

我們可以簡單地使用

async: false 

這將做您的需要。