求助ajax实现购物车功能

求助大佬Ajax实现购物车功能
使用ajax实现数量的增减,数量的直接修改,小计价格随数量变化,单独删除功能,全选功能及批量删除,购物金额总计功能
以下是html代码部分

购物车页面
        </div>
        <div class="topnav_right fr">
            <ul>
                <li>您好,欢迎来到京西![<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
                <li class="line">|</li>
                <li>我的订单</li>
                <li class="line">|</li>
                <li>客户服务</li>

            </ul>
        </div>
    </div>
</div>
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl">
            <a href="index.html"><img src="images/logo.png" alt="京西商城"></a>
        </h2>
        <div class="flow fr">
            <ul>
                <li class="cur">1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="mycart w990 mt10 bc">
    <h2><span>我的购物车</span></h2>
    <table>
        <thead>
            <tr>
                <th class="col0"><input type="checkbox" /></th>
                <th class="col1">商品名称</th>
                <th class="col2">商品信息</th>
                <th class="col3">单价</th>
                <th class="col4">数量</th>
                <th class="col5">小计</th>
                <th class="col6">操作</th>
            </tr>
        </thead>
        <tbody id="cartBox">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">购物金额总计: <strong>¥ <span id="total">0</span></strong></td>
            </tr>
        </tfoot>
    </table>
    <div class="cart_btn w990 bc mt10">
        <a href="javascript:;" class="continue dels">删除选中商品</a>
        <a href="javascript:;" class="checkout">结 算</a>
    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
    <p class="links">
        <a href="">关于我们</a> |
        <a href="">联系我们</a> |
        <a href="">人才招聘</a> |
        <a href="">商家入驻</a> |
        <a href="">千寻网</a> |
        <a href="">奢侈品网</a> |
        <a href="">广告服务</a> |
        <a href="">移动终端</a> |
        <a href="">友情链接</a> |
        <a href="">销售联盟</a> |
        <a href="">京西论坛</a>
    </p>
    <p class="copyright">
        ? 2005-2013 京东网上商城 版权所有,并保留所有权利。 ICP备案证书号:京ICP证070359号
    </p>
    <p class="auth">
        <a href=""><img src="images/xin.png" alt="" /></a>
        <a href=""><img src="images/kexin.jpg" alt="" /></a>
        <a href=""><img src="images/police.jpg" alt="" /></a>
        <a href=""><img src="images/beian.gif" alt="" /></a>
    </p>
</div>
<!-- 底部版权 end -->

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/template-web.js"></script>
<script src="js/cart.js"></script>
<script type="text/html" id="cartTpl">
    {{each data}}
    <tr>
        <td class="col0"><input type="checkbox" /></td>
        <td class="col1">
            <a href=""><img src="{{$value.pic}}" alt="" /></a> <strong><a
					href="">{{$value.title}}</a></strong></td>
        <td class="col2">
            <p>{{@ $value.attr}}</p>
        </td>
        <td class="col3">¥<span>{{$value.price}}</span></td>
        <td class="col4">
            <a href="javascript:;" class="reduce_num"></a>
            <input type="text" name="amount" value="{{$value.num}}" class="amount" data-id="{{$value._id}}" />
            <a href="javascript:;" class="add_num"></a>
        </td>
        <td class="col5">¥<span>{{$value.price*$value.num}}</span></td>
        <td class="col6"><a href="" class="delete" data-id="{{$value._id}}">删除</a></td>
    </tr>
    {{/each}}
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
package shoppingcart.biz; import java.util.HashMap; import java.util.Iterator; import java.util.Map; /** * 购物车 */ public class ShoppingCart { private Map cartMap = null; //保存Product的Map /** * 购物车构造函数 */ public ShoppingCart(){ cartMap = new HashMap(); } /** * 取得存放产品的cartMap */ public Map getCartMap(){ return this.cartMap; } /** * 向购物车中添加产品 */ public boolean addProduct(String productId){ if(existProduct(productId)){ // 产品已存在则增加数量 Product product = cartMap.get(productId); product.setProductNum(product.getProductNum() + 1); return true; } else{ // 否则新加入该产品 Product product = new Product(productId); if(product.getProductId()==null){ return false; // 数据库中无该产品 }else{ cartMap.put(productId, product); return false; } } } /** * 检查购物车里是否已存在该产品 */ public boolean existProduct(String productId){ Iterator hmkey = cartMap.keySet().iterator(); while(hmkey.hasNext()){ String pid = hmkey.next(); if(pid.equals(productId)){ return true; } } return false; } /** * 从购物车中移除指定产品 */ public void delProduct(String productId){ cartMap.remove(productId); } /** * 获取购物车产品数量 */ public int getProductNum(){ int productNum = 0; Iterator hmEntry = cartMap.values().iterator(); while(hmEntry.hasNext()){ productNum += hmEntry.next().getProductNum(); } return productNum; } /** * 统计购物车商品总价 */ public double getTotalprice(){ double totalPrice = 0.0; Iterator hmkey = cartMap.keySet().iterator(); Product product = null; while(hmkey.hasNext()){ product = cartMap.get(hmkey.next()); totalPrice += product.getProductPirce() * product.getProductNum(); } return totalPrice; } /** * 清空购物车 */ public void clearCart(){ cartMap.clear(); } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值