【京东账户】——Mysql/PHP/Ajax爬坑之购物车删除选项

一、引言

做京东账户项目中的购物车模块，功能之三就是删除购物车中的选项。要用到的是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":"删除成功"}'

<?php
header("Content-Type:application/json;charset=utf-8");
$id = $_REQUEST['id'] or die ('{"code":-1,"msg":"删除编号不能为空"}');
require('init.php');
$sql = "DELETE FROM jd_cart WHERE id=$id";
$result = mysqli_query($conn,$sql);
echo '{"code":1,"msg":"删除成功"}';
?>

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

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

• shoppingcart.html

<td><a href="1">删除</a></td>                         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，减-1
   WHERE id = $id;

3. 发送sql删除                    '{"code":1,"msg":"删除成功"}'

 创建js｛分析html/js｝：  

• shoppingcart.html

  <td>1199.00</td>
  <td>
  <button>-</button>
  <input  type="text"  value="8">
  <button>+</button>
  </td>
  <td><span>￥9552</span></td>

• js/shoppingcart.js