javascript — множественные одновременные запросы Ajax (с одним обратным вызовом) в jQuery

Question

javascript — множественные одновременные запросы Ajax (с одним обратным вызовом) в jQuery

Я пытаюсь заставить страницу загружаться быстрее, разбивая все вызовы базы данных на отдельные скрипты и одновременно запуская их с помощью ajax. Я провел некоторое исследование и обнаружил, что jQuery имеет функцию $ .when (). Then (), которая может позаботиться об этом. Я в порядке с основами AJAX, но концепция отложенного / обещания немного смутила меня. Я попробовал приведенный ниже код, но он будет загружать данные только из первого результата AJAX. Закомментируя первый, вы загрузите следующий, но на странице появится только один.
Ценю любую помощь с этим. Благодарю.

 $.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");
}
);

0

ajax javascript jquery jquery-deferred php

Решение

Другие решения

Может быть, вам нужно получить данные из одного обратного вызова

$.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");
}
);

0

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

Вы продолжаете добавлять аргументы в функции success и error, чтобы заставить его работать. Надеюсь, поможет

0

Источник

Accepted Answer

Это может быть механизировано следующим образом:

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

1