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

Question

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

这是我的代码：

var cart = []

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

$("#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.apply(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();
    });
  })
});

Answer 1

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

ajaxq.js本质上与jQuery的$.post()方法一样，仅您还可以按名称指定多个队列以异步执行，并将回调函数附加到它们上。

这是一个简单的示例，说明如何使用此库设置Ajax Cart Preview。

/* 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库的示例：

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]);

  });

Answer 2

您的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();
        });
      })
});