jquery - 如何使用 jQuery 在 Ajax 中实现购物车？

Question

我正在开发一个购物车。每个产品都有一个价格和一个子类别。

产品:

ID Price    Product No ProductName
1  250.5$   esp1       Electronic Machine
2  500.0$   esp2       Scanner

用户可以通过选择上述任何产品来选择产品。 还有一个与每个 Product 关联的 CommonProduct。

通用产品:

Common_id   Price  Name
cs1         1.2$   Addional_Item1
cs2         5.0$   Additional_Item2

做出选择后，购物车将如下所示:

 Qty  Name                 Price
 1    Electronic Machine   256.7$
      Additional_item1
      Additional_item2
 1    Scanner             505.0$
       Additional_item2

我需要上述流程的实现思路。将 Product 与 Common Product 集成对我来说非常困难。

是否有使用 Ajax 实现此目的的好方法？

Answer 1

建立在Greg之上说，你可以构建一个简单的 JavaScript 对象，看起来有点像这样......

Cart = function(){    
    this.add = function( productid ){
        //jQuery Ajax method via PUT
    }
    this.remove = function( id ){
        //jQuery Ajax method via DELETE
    }
}

这个CRUD对象将是服务器端购物车的 JavaScript 接口(interface)，它可以/应该实现 RESTful界面。

至于显示通用产品，在返回包含通用产品的XML响应的服务器上。添加电子机器的 XML 响应可能如下所示:

<root>
   <product price="250.0">Electronic Machine</product>
   <commonproducts>
       <commonproduct price="1.2">additional_item 1</commonproduct>
       <commonproduct price="5.0">additional_item 2</commonproduct>
   </commonproducts>
</root>

用例:购买 Sanner

Cart = new Cart();
//Do Ajax call
xmlResponse = Cart.add(1);

//Parse XML response and get an array of products
commonProducts = $(xmlResponse).find('commonProducts');

//Iterate over the array
$().each( commonProducts, function(v,i){
    //Format them as you please
})

另一种方法是将其分为两个方法，并提供另一个接口(interface)来查询产品是否有通用产品，然后简单地向 CRUD 方法返回成功或失败响应。

希望这是有用且有意义的!