移動端商城購物車商品數量用Ajax技術管理實現

用戶在管理購物車商品數據的時候，可以進行以下操作：

1、增加/減少商品數量。

2、全選或者選擇某一條商品記錄。

3、刪除操作。

對已經選中的商品記錄進行結算操作。

首先來看增加/減少商品數量的實現，用戶手動增減商品購買數量的時候，Mysql數據庫表記錄也需要更新。為了提升用戶體驗，所有的操作都使用Ajax的方式異步操作。HTML代碼結構如下：

<div class="goods_nums">

<div class="goods_nums_del" goods_id="{$vo.goods_id}"

goods_price="{$vo.goods_info.price}">-</div>

<div class="goods_nums_input">{$vo.num}</div>

<div class="goods_nums_add" goods_id="{$vo.goods_id}"

goods_price="{$vo.goods_info.price}">+</div>

<div style="clear: all"></div>

</div>

在“+”和“-”按鈕上分別定義goods_id和goods_price屬性，可以方便地更新在數據庫中的商品記錄。同時也可以在頁面上直接計算和展示出用戶操作後最終的價格。

為“+”按鈕綁定click事件，代碼如下

為“-”按鈕綁定click事件代碼如下：

由於在JavaScript中字符串拼接和加法都使用“+”號，為了避免類型導致的錯誤，所示使用了Number（）方法對字符串進行類型轉換。