一、引言

做京东账户项目中的购物车模块，功能之三就是删除购物车中的选项。要用到的是Apach环境，Mysql、PHP以及Ajax。

 

二、依据功能创建库、表、记录

创建库:jd

创建表:购物车表  jd_cart

购物车编号 id INT用户编号 uid INT产品编号 productid INT购买数量 count INT

  

三、创建php

①jd.sql   ②init.php  ③cart_del.php

header("content-type:application/json;...");

1. 获取删除购物项id值       '{"code":-1,"msg":"删除编号不能为空"}'连接数据
2. 发送sql删除                    '{"code":1,"msg":"删除成功"}'

 

测试  ：http://127.0.0.1/jd_store/data/cart_del.php?id=1       返回{"code":1,"msg":"删除成功"}

 

四、创建js{分析html/js}

• shoppingcart.html

删除                         42 line$("a:contains('删除')").click();                      坑，直接绑定元素是不对的$("#cart tbody").on('click','a:contains("删除")');;   正确方式 动态添加的要代理

 

• js/shoppingcart.js

       a->td->tr 删除

 

/***删除购物车选项***/    $("#cart tbody").on("click","a:contains('删除')",function(e){        e.preventDefault();        var did = $(this).attr("href");        //留存this-->a  后面会变        var that = this;//that -->a        $.ajax({            type:"POST",            url:"data/cart_del.php",            data:{id:did},            success:function(data){                if(data.code<0){                    alert("删除失败：原因"+data.msg);                }else{                    alert("删除成功");                    $(that).parent().parent().remove();                }            },            error:function(){                alert("删除失败，请检查网络");            }        });    });

 

bug：删除失败，请检查网络

原因：cart_del.php访问地址写错。也会导致网络请求错误。要写成data/cart.del,php。

 

实现效果：

 

 

五、小功能-修改购物车项目数量

 创建php：

• data/cart_update_add.php
• data/cart_update_sub.php

        header("content-type:application/json;...");

1. 获取修改购物项id值       '{"code":-1,"msg":"删除编号不能为空"}'连接数据
2. 连接数据      
   UPDATE jd_cart  SET   count = count+1//加+1，减-1WHERE id = $id;
3. 发送sql删除                    '{"code":1,"msg":"删除成功"}'

 

 创建js｛分析html/js｝：  

• shoppingcart.html
  1199.00-  +￥9552

• js/shoppingcart.js