AJAX Cart - 在Javascript / jQuery中实现的最佳方式

Question

我正在开发一个PHP电子商务网站，该网站将用户购物车存储在会话变量中。 我希望能够使用jQuery通过AJAX来操作它，但我不确定最好的方法。

我认为我基本上想要为购物车创建一个API，然后我可以在整个系统中使用它。 例如，我希望能够做到以下几点：

Cart.addItem(product_id, qty);
Cart.removeItem(product_id);
Cart.getTotal();

在幕后，这会向服务器发出各种AJAX请求，根据需要更新会话：

var Cart = {
    addItem: function(product_id, qty){
          $.ajax({
            type: 'POST',
            data: { product_id: product_id, qty: qty },
            url: 'cartAjax.php?action=add_to_cart',                
            success: function(){
               return true;
            }
        });
    },
    removeItem: function(product_id){
          $.ajax({
            type: 'POST',
            data: { product_id: product_id },
            url: 'cartAjax.php?action=remove_from_cart',                
            success: function(){
               return true;
            }
        });
    },
    getTotal: function(){
          $.ajax({
            type: 'POST',                
            url: 'cartAjax.php?action=fetch_cart_total',                
            success: function(response){
               return response.total;
            }
         });
    }
}

这是正确的方法吗？ 我是否应该接近如何做到这一点？

Answer 1

你的回复状态有点粗心，如果我是你，我会这样做：

var cartUpdatedInfo; // IMPORTANT
var Cart = {
    addItem: function(product_id, qty){
          $.ajax({
            type: 'POST',
            data: { product_id: product_id, qty: qty },
            dataType : 'json',
            url: 'cartAjax.php?action=add_to_cart',                
            success: function(data){
               if(data.result == 'DONE')
               {
                   cartUpdatedInfo = data.cartUpdatedInfo; // receives fresh data from server
               }
            }

           error : function(){
              // handle the error. VERY VERY IMPORTANT, to avoid scrip-level
              // errors to be exposed to the user
           }
        });
    },
 // the rest of the code

在PHP中，完成操作后，我会返回这个：

/// operation done
if($operationDoneSuccessfully)
{
   // though you probably want to use echo
   return json_encode(array('result'=>'DONE', 'cartUpdatedInfo' => $cartInfo)); 
}

使用上述内容，您可以使用服务器发送的最新有效数据更新购物车信息（或验证客户端更改）。

此外，值得限制用户单击/请求，这意味着您最好为addToCart按钮的click事件设置禁用功能，这意味着：

$("#addToCart").on("click", function(){
     // after doing certain things for prpation
     var cartBtn = $(this);
     setTimeout(function(){
         cartBtn.prop("disabled", true);
     }, 200);
});

您可以稍后在ajax完成后重新启用它。

关于检查请求并发性和/或其有效性的另一点，您可以在AJAX名称中添加另一个参数，例如“token”或“_token”或您喜欢的任何内容：

$.ajax({
   data : { token : randId(25) /* ..... */ },
   // the rest
});

和randId（）函数可能是这样的：

function randId(len)
{
  var newNum = "";
  for(i = 0; i < len; i++)
  {
     newNum += getRandomInt(0,9);
  }
  return newNum;
}

您可以在生成的随机性的开头添加一个任意值，这样您就可以确保它是您自己随机生成的令牌：

function randId(len)
{
  var newNum = "";
  for(i = 0; i < len; i++)
  {
     newNum += getRandomInt(0,9);
  }
  return "token"+newNum;
}

// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
} // Copied from MDN Javascript Documentation

我已将数字视为字符串，以避免大整数的内存分配。

另外需要注意的是，在服务器端做几件事来提升你的AJAX：

• 设置会话以限制用户对同一URL的并发请求。

• 每次检查每个单独任务的用户ID或会话

• 始终将用户视为正在做一些技巧的人
  更改AJAX发送的输入