发送多个 AJAX 请求以将产品添加到购物车失败答案

【问题标题】：Sending Multiple AJAX request to Add Product To Cart Failing发送多个 AJAX 请求以将产品添加到购物车失败
【发布时间】：2017-06-01 20:11:53
【问题描述】：

我正在尝试通过 AJAX 将一些不同产品添加到 woocommerce“购物车”。它非常简单，但是失败了。这是我的代码：

$.ajax({url: "/wordpress/?post_type=product&add-to-cart=" + p_id,
      statusCode: {
        200: function() {
          console.log('/wordpress/?post_type=product&add-to-cart=' + p_id);
          console.log('It Worked');
        }
      }
    }
);

我也做过：

$.get('/wordpress/?post_type=product&add-to-cart=' + p_id, function() {
         console.log('/wordpress/?post_type=product&add-to-cart=' + p_id);
});

我在一个函数中为每个产品多次调用它。我从中获得 console.log 的第一个产品是唯一添加的产品。我该如何解决？再次重新盖帽，目标：使用 AJAX 一次将多个不同的产品添加到购物车。也许我需要创建一个从 AJAX 调用的自定义 php 脚本？

谢谢~

【问题讨论】：

您需要一个循环来遍历购物车中的每个商品
是的，我有一个循环为每个项目调用此函数并将其添加到购物车。但只有一个被添加。也许您需要在每次调用之间等待一段时间才能添加？

标签： jquery ajax wordpress woocommerce wordpress-theming

【解决方案1】：

原因是竞争 ajax 请求。因此，在每个循环中，您都会启动一个新请求，但添加到购物车操作一次只接受一个请求并阻止其他请求。

解决方法：等待你的ajax调用成功触发后再设置下一个请求。

例如像这样：

var i = 0;
var arrayProductIds = [1,2,3];

(function makeAjaxRequest() {
  $.post('?add-to-cart=' + arrayProductIds[i], function() {

    // success, so start next request
    i++;
    if (i === arrayProductIds.length){
      // all products have been added
    }else{
      makeAjaxRequest();
    }
  });
})();

【讨论】：