jQuery 中的多个同时 Ajax 请求（带有一个回调）

Question

我试图通过将所有数据库调用拆分为单独的脚本并使用 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");
                }
    );  

Answer 1

也许你需要从一个回调中获取数据

$.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 2

这可以机械化如下：

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

Answer 3

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

您继续在成功和错误函数中添加参数以使其工作。希望对你有帮助