Mehrere simultane Ajax-Anfragen (mit einem Callback) in jQuery

Question

Ich versuche eine Seite schneller zu laden, indem ich alle Datenbankaufrufe in separate Skripte aufspalte und gleichzeitig mit ajax ausfühle. Ich habe einige Nachforschungen angestellt und festgestellt, dass jQuery eine $ .when(). Then() Funktion hat, die sich darum kümmern kann. Ich bin in Ordnung mit den Grundlagen von Ajax, aber das Konzept der aufgeschobenen/Versprechen hat mich ein wenig verwirrt. Ich habe den folgenden Code versucht, aber es wird nur die Daten aus dem ersten Ajax-Ergebnis laden. Beim Auskommen des ersten wird der nächste geladen, aber nur einer wird auf der Seite angezeigt. Schätzen Sie jede Hilfe mit diesem. Vielen Dank.

$.when( $.post('extensions/ext_adjustments_investigation/general_details.php', {sku: sku},function(data) { result = data; }), 
       $.post('extensions/ext_adjustments_investigation/location_information.php', {sku: sku},function(data1) { result1 = data1; }), 
       $.post('extensions/ext_adjustments_investigation/annotations.php', {sku: sku},function(data2) { result2 = data2; }), 
       $.post('extensions/ext_adjustments_investigation/adjustment_history.php', {sku: sku},function(data3) { result3 = data3; }) 

    ).then( 
    function() { 
     $("#searching").addClass("hidden"); 
     $("#load").prop("disabled",false); 
       $("#general").html(result).hide().slideDown()("slow"); 
       $("#location").html(result1).hide().slideDown()("slow"); 
       $("#anno").html(result2).hide().slideDown()("slow"); 
       $("#history").html(result3).hide().slideDown()("slow"); 
       } 
    ); 

Answer 1

$.when(calla(), callb()).then(
    function(result1, result2){ 
     //do something with the results 
    } 
    , 
    function(error){ 
     console.log('error'+error); 
    } 
); 

Sie halten auf Argumente in den Erfolgs- und Fehlerfunktionen Hinzufügen es funktioniert. Hoffe, es

Answer 2

hilft Vielleicht müssen Sie die Daten aus dem einen Rückruf erhalten

$.when(
    $.post('extensions/ext_adjustments_investigation/general_details.php', {sku: sku}), 
    $.post('extensions/ext_adjustments_investigation/location_information.php', {sku: sku}), 
    $.post('extensions/ext_adjustments_investigation/annotations.php', {sku: sku}), 
    $.post('extensions/ext_adjustments_investigation/adjustment_history.php', {sku: sku}) 
).then(
    function (general, location, annotations, history) { 
     $("#searching").addClass("hidden"); 
     $("#load").prop("disabled", false); 
     $("#general").html(general).hide().slideDown()("slow"); 
     $("#location").html(location).hide().slideDown()("slow"); 
     $("#anno").html(annotations).hide().slideDown()("slow"); 
     $("#history").html(history).hide().slideDown()("slow"); 
    } 
); 

Answer 3

Dies kann wie folgt mechanisiert werden:

var baseURL = 'extensions/ext_adjustments_investigation/'; 
var data = [ 
    {script: 'general_details.php', selector: "#general"}, 
    {script: 'location_information.php', selector: "#location"}, 
    {script: 'annotations.php', selector: "#anno"}, 
    {script: 'adjustment_history.php', selector: "#history"} 
]; 
var promises = data.map(function(item) { 
    return $.post(baseURL + item.script, {sku: sku}).then(function(data, textStatus, jqXHR) { 
     return data; 
    }, function(error) { 
     console.log(error); 
     return $.when('error');//error recovery 
    }); 
}); 
$.when.apply(null, promises).then(function() { 
    $('#searching').addClass('hidden'); 
    $('#load').prop('disabled', false); 
    for(var i=0; i<arguments.length; i++) { 
     $(data[i].selector).html(arguments[i]).hide().slideDown()('slow'); 
    } 
});