【京东账户】——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