javascript - 使用 jQuery 完成 AJAX 调用时的回调

Question

我无法使回调正常工作。这是我想要实现的目标:我有 2 个商品想要添加到购物车，因此我发出 2 个异步 POST 请求。一旦这两个 POST 请求完成，我想更新购物车的部分 View 。问题是似乎只有 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 购物车预览的快速示例。

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

  });