當使用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();
        });
      })
});