javascript - 链接基于 jQuery 的 Ajax 请求的结果。each 仅在 beforeSend 之前触发一次

Question

我修改了 Magento 处理类别的方式，以允许用户通过将添加到购物车 URL 的 ajax 请求链接在一起，从类别页面一次添加多个可配置产品。

基本上，用户选择一个复选框来添加他们想要添加的项目，这会给出 <li>该产品属于“ active ”类别。这个 jQuery 抓取每个 <li>它有一个事件类，然后从变量 theLink 的选定下拉列表中获取“添加到购物车 URL”。

$j('li.active').each(function(){
            var theLink = $j(this).find('.shopthislookpageselect').val();
            var successString = "was added to your shopping cart."
            $j.ajax({
                beforeSend: function(){$j('#modalBackground').show();},
                type:"POST",
                url: theLink,
                success: function(data){
                    var returnPage = data;
                    var exists = (returnPage.indexOf(successString) !== -1);
                    if (exists) {$j('.col-main').prepend('<ul class="messages"><li class="success-msg"><ul><li><span>The items selected were added to your shopping cart. View your cart <a href="https://www.culturekings.com.au/checkout/cart/">HERE</a></span></li></ul></li></ul>'); $j("html, body").animate({ scrollTop: 0 }, "slow"); }
                    else {alert ('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.')}
                    },
                error: function(){alert('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.');},
                complete: function(){$j('#modalBackground').fadeOut(200);}
            });
});

div modalBackground是一个透明的全宽和全高覆盖层，有一个加载 gif，应该在每个 ajax 调用开始时显示，并在结束时隐藏。

问题是 modalBackground 在第一个 ajax 调用开始时显示，在结束时隐藏，但之后的任何其他调用都不会再次显示。我可以看到该函数仍在运行，因为我可以计算成功函数每次成功调用结束时显示的成功消息。

beforeSend 只触发一次吗？如果是这样为什么？或者我应该对覆盖层进行不同的处理。

请注意，如果不更改 Magneto 的添加到购物车 Controller 中的重大内容，它无法处理一次添加所有产品，因此我只能执行这些多个 Ajax 请求。

Answer 1

这是一种方法:

// this will store the ajax requests with are jQuery.Deferred()
var promises = [];

// ajaxSettings.beforeSend is actually better to use to modify the xhr.
// You can just do this beforehand.
$j('#modalBackground').show();
$j('li.active').each(function(){
   // all your other stuff
   // success and error callbacks will still run for each one.
   promises.push($j.ajax({
       type:"POST",
       url: theLink,
       success: function(data){
           var returnPage = data;
           var exists = (returnPage.indexOf(successString) !== -1);
           if (exists) {$j('.col-main').prepend('<ul class="messages"><li class="success-msg"><ul><li><span>The items selected were added to your shopping cart. View your cart <a href="https://www.culturekings.com.au/checkout/cart/">HERE</a></span></li></ul></li></ul>'); $j("html, body").animate({ scrollTop: 0 }, "slow"); }
           else {alert ('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.')}
       },
       error: function(){alert('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.');}
    }));
});

// What this does is gathers all those jQuery.Deferred and when
// all of them are done, runs the done callback.
$j.when.apply($, promises).done(function() {
    $j('#modalBackground').fadeOut(200);
});

这一切都会发生在同一个函数中，因此无论您如何调用它，都要一起完成。

了解有关 Deferred() 的更多信息:http://api.jquery.com/category/deferred-object/