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购物车预览的简单示例。

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

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

2 个答案: