Fatal编程技术网
  • javascript/
  • Javascript 链接基于jQuery结果的Ajax请求。每个请求只在发送前触发一次

Javascript 链接基于jQuery结果的Ajax请求。每个请求只在发送前触发一次

javascript ajax jquery

Javascript 链接基于jQuery结果的Ajax请求。每个请求只在发送前触发一次,javascript,ajax,jquery,Javascript,Ajax,Jquery,我修改了Magento处理类别的方式，允许用户通过将添加到购物车URL的ajax请求链接在一起，从类别页面一次添加多个可配置产品 基本上，用户会选择一个复选框来添加他们想要添加的项目，这会给出产品属于“活动”类的。此jQuery获取每个具有活动类的，然后从变量theLink中选择的下拉列表中获取“添加到购物车URL” $j('li.active').each(function(){ var theLink = $j(this).find('.shopthislookpag

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

基本上，用户会选择一个复选框来添加他们想要添加的项目，这会给出产品属于“活动”类的
    • 。此jQuery获取每个具有活动类的
    • ，然后从变量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);}
            });
});

    $j（'li.active'）。每个（函数（）{
var theLink=$j（this.find（'.shopthislookpageselect'）.val（）；
var successString=“已添加到您的购物车。”
$j.ajax({
beforeSend:function（）{$j（'#modalBackground'）.show（）；}，
类型：“POST”，
url:theLink，
成功：功能（数据）{
var returnPage=数据；
var exists=（returnPage.indexOf（successString）！=-1）；
如果（存在）{$j（'.col main'）.prepend（'
      • 所选项目已添加到您的购物车中。查看您的购物车；$j（“html，body”）。动画（{scrollTop:0}，“slow”）；}
else{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）}
},
错误：function（）{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）；}，
complete:function（）{$j（'#modalBackground'）.fadeOut（200）}
});
});
    div
    modalBackground
    是一个透明的全宽和全高覆盖，它有一个加载gif，应该在每个ajax调用开始时显示，在结束时隐藏

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

    以前只发一次火吗？如果是，为什么？或者我应该以不同的方式处理叠加

    请注意，如果不更改Magnetor的AddtoCart控制器中的一些重要内容，它无法同时添加所有产品，因此我只能执行这些多个Ajax请求

    这里有一种方法：

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

    //这将使用arejquery.Deferred（）存储ajax请求
var承诺=[]；
//实际上，最好使用ajaxSettings.beforeSend来修改xhr。
//你可以事先做这件事。
$j（“#modalBackground”）.show（）；
$j（'li.active'）。每个（函数（）{
//你所有的其他东西
//成功和错误回调仍将为每个回调运行。
承诺。推送（$j.ajax）({
类型：“POST”，
url:theLink，
成功：功能（数据）{
var returnPage=数据；
var exists=（returnPage.indexOf（successString）！=-1）；
如果（存在）{$j（'.col main'）.prepend（'
      • 所选项目已添加到您的购物车中。查看您的购物车；$j（“html，body”）。动画（{scrollTop:0}，“slow”）；}
else{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）}
},
错误：function（）{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）；}
}));
});
//这样做的目的是收集所有jQuery.Deferred和
//所有这些操作都已完成，运行“完成”回调。
$j.when.apply（$，promissions）.done（函数（）{
$j（“#modalBackground”）。衰减（200）；
});
    这一切都会发生在同一个函数中，所以无论您如何调用它，都要一起执行

    要了解有关延迟（）的更多信息：

    以下是一种方法：

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

    //这将使用arejquery.Deferred（）存储ajax请求
var承诺=[]；
//实际上，最好使用ajaxSettings.beforeSend来修改xhr。
//你可以事先做这件事。
$j（“#modalBackground”）.show（）；
$j（'li.active'）。每个（函数（）{
//你所有的其他东西
//成功和错误回调仍将为每个回调运行。
承诺。推送（$j.ajax）({
类型：“POST”，
url:theLink，
成功：功能（数据）{
var returnPage=数据；
var exists=（returnPage.indexOf（successString）！=-1）；
如果（存在）{$j（'.col main'）.prepend（'
      • 所选项目已添加到您的购物车中。查看您的购物车；$j（“html，body”）。动画（{scrollTop:0}，“slow”）；}
else{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）}
},
错误：function（）{alert（'将这些产品添加到购物车时出现问题。\n请选择查看完整产品信息链接以单独添加这些项目。'）；}
}));
});
//这样做的目的是收集所有jQuery.Deferred和
//所有这些操作都已完成，运行“完成”回调。
$j.when.apply（$，promissions）.done（函数（）{
$j（“#modalBackground”）。衰减（200）；
});
    这一切都会发生在同一个函数中，所以无论您如何调用它，都要一起执行

    要了解有关Deferred（）的更多信息：

    在我看来，您正在处理一个与此操作的异步性质相关的时间问题。我建议解雇你的$j（'modalBackground'）。show（）；命令一次，但只淡出一次。因此，本质上，您希望做一些更像这样的事情：