【京东账户】——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;...");

获取删除购物项id值 '{"code":-1,"msg":"删除编号不能为空"}'连接数据
发送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。

实现效果：

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

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

创建php：

data/cart_update_add.php
data/cart_update_sub.php

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

获取修改购物项id值 '{"code":-1,"msg":"删除编号不能为空"}'连接数据

连接数据

UPDATE jd_cart  SET   count = count+1//加+1，减-1

WHERE id = $id;

发送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

秒客网

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

相关文章