Javascript 使用jQuery完成AJAX调用时的回调

我无法使回调正常工作。以下是我试图实现的目标：我有两个项目要添加到购物车中，因此我提出了两个异步POST请求。完成这两个POST请求后，我想更新购物车的部分视图。问题是，似乎只有一个项目被添加到购物车。当我调试它时，会添加两个项目。任何建议或帮助都会很好。提前谢谢

这是我的密码：

var cart=[] 函数AddToCartinput{ 返回$.ajax{ 方法：“POST”， url:“/cart/add.js”， 数据：输入， 数据类型：“json” } .donefunctiondata{ 返回数据； }; } $addToCart.clickfunction{ $“capsContainer输入：已选中”。每个函数{ var cartItem={ id:$this.val， 数量：1 } cart.pushcartItem； }; var test1=AddToCartcart[0]； var test2=AddToCartcart[1]； $.when.applytest1，test2.donefunction{ $.getJSON'/cart.js'，functiondata{ $'.cart item count'.textdata.item_count； $'.cart item price'.htmlformatMoneydata.total_price； 展示车； }; } };

---

AddToCart方法已返回延迟对象。您正在调用.done方法两次

我想你的代码应该是这样的

var cart = []

function AddToCart(input) {
  return $.ajax({
    method: 'POST',
    url: '/cart/add.js',
    data: input,
    dataType: 'json'
  });
}  

$("#addToCart").click(function() {
  $('#capsContainer input:checked').each(function() {
    var cartItem = {
      id: $(this).val(),
      quantity: 1
    }

    cart.push(cartItem);
  });

  var test1 = AddToCart(cart[0]);
  var test2 = AddToCart(cart[1]);

  $.when(test1, test2).done(function() {
        $.getJSON('/cart.js', function(data) {
            $('.cart-item-count').text(data.item_count);
            $('.cart-item-price').html(formatMoney(data.total_price));      
            ShowCart();
        });
      })
});

---

问题的一部分在于，使用ajax请求（可能发生在代码执行之前或之后）来处理这些执行。由于它们是异步的，因此它们可能会在页面上运行任何其他代码之前触发/返回，这取决于浏览器的Javascript解析器决定如何执行代码。您可以通过使用一个名为ajaxq.js的600字节小库来控制整个交互，而不是尝试对异步ajax请求使用回调

js的工作原理与jQuery的$.post方法类似，只是您还可以按名称指定多个队列以异步执行，并向它们附加回调或其他任何内容

下面是一个如何使用此库设置Ajax购物车预览的快速示例

/* queue up an AJAX request */
$.postq("set_data", "add_items.php", {"itemID": someItemID, "customerID": customerID },
  function(result1) {


  /* perform new request at the end of first request */

  $.postq("get_data", "get_items.php", { "id": customerID }, 
      function(result2) {

    /* add in code to perform at the end of the second ajax POST request */

  }); // end of request 2

}); // end of request 1

下面是使用ajaxq.js库的示例：

---

$.ajax返回一个已经延迟的jqXHR对象，因此此处不建议使用$.when可能会重复@SterlingArcher，我在使用$之前就这样做了。当$.when中的回调在完成时，但它似乎只处理了一个POST请求。如何使它等到两个POST请求都完成后？您可以考虑使用名为Ajax Q.JS的库，该库可以用来分组Ajax请求，然后，您可以将请求嵌入$.postq请求的回调部分，该部分遵循与$.postI相同的语法。postI尝试了此操作，但每次单击“添加到购物车”按钮时，它仍会添加一项。它添加这两个项的唯一时间是在我调试它时。因此，weirdI认为，当我发现它时，我确实说过同样的话——似乎是解决许多与ajax及其异步方式相关的问题的方法

function AddToCart(input) {
   $.postq("add_item", "/cart/add/js", input, function(result) {
        preview_items();
    }, "json");

}  

function preview_items() {
 $.getJSON('/cart.js', function(data) {
        $('.cart-item-count').text(data.item_count);
        $('.cart-item-price').html(formatMoney(data.total_price));      
        ShowCart();
}


$(document).ready(function() { 
  $("#addToCart").on("click" function() {
    $('#capsContainer input:checked').each(function(elem) {
      var cartItem = {
        id: $(this).val(),
       quantity: 1
      }

      cart.push(cartItem);
    });

    var test1 = AddToCart(cart[0]);
    var test2 = AddToCart(cart[1]);

  });