一、引言

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

【京东账户】——Mysql/PHP/Ajax爬坑之购物车删除选项的更多相关文章

  1. 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示

    一.引言 做京东账户项目中的购物车模块,功能之二是购物车列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.小功能-点击“去购物车结算” 小坑:Ajax动态生成的不能直接绑定,因 ...

  2. 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表分页

    一.引言 做京东账户项目中的购物车模块,功能之四就是购物车列表的分页显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.查询数据 mysql: SELECT * FROM jd_pr ...

  3. 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

    一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车"  添加成功 ...

  4. 【京东账户】——Mysql/PHP/Ajax爬坑之页头页尾加载

    一.引言 实现京东的账户项目,有一个小功能,页头页尾加载.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.实现 原理: 用php文件分别写一个的页头和一个页尾,放在前后两个div里. ...

  5. 【京东账户】——Mysql/PHP/Ajax爬坑之产品列表显示

    一.引言 实现京东的账户项目,功能模块之一,产品列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:产品表 添加多条记录 /**产 ...

  6. 【京东账户】——Mysql/PHP/Ajax爬坑之用户登录

    一.引言 实现京东的账户项目,功能模块之一,用户登录.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:登录表 添加三条记录 CREATE ...

  7. 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页

    前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...

  8. 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

    前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...

  9. 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结

    前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...

随机推荐

  1. HDU5857 Median 模拟

    Median HDU - 5857 There is a sorted sequence A of length n. Give you m queries, each one contains fo ...

  2. java 课堂笔记

  3. android下拉弹出动画

    <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http:// ...

  4. 欧拉回路基础 HDU1878 欧拉回路||并差集

    欢迎参加——每周六晚的BestCoder(有米!) 欧拉回路 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  5. Fragment控件初始化

    代码改变世界 Fragment控件初始化 @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup ...

  6. (转)对称加密与非对称加密,以及RSA的原理

    一 概述 二对称加密和非对称加密 对称加密 非对称加密 区别 三RSA原理 整数运算 同余运算 当模数为合数n时 当模数为质数p的时候 离散对数问题 RSA原理 一 , 概述 在现代密码学诞生以前,就 ...

  7. 【bzoj3771】Triple FFT+容斥原理

    题目描述 樵夫的每一把斧头都有一个价值,不同斧头的价值不同.总损失就是丢掉的斧头价值和. 他想对于每个可能的总损失,计算有几种可能的方案. 注意:如果水神拿走了两把斧头a和b,(a,b)和(b,a)视 ...

  8. P4513 小白逛公园

    题目背景 小新经常陪小白去公园玩,也就是所谓的遛狗啦… 题目描述 在小新家附近有一条“公园路”,路的一边从南到北依次排着 nnn 个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. 一开始,小白 ...

  9. JZOJ 5281 钦点

    样例输入: 4 4 2 a a b b a a b b c c d d c c d d 1 1 3 3 2 2 3 1 1 3 2 2 样例输出: d d c c  d d c c  b b a a  ...

  10. ZOJ 3874 Permutation Graph ——分治 NTT

    发现每一块一定是按照一定的顺序的. 然后与标号无关,并且相同大小的对答案的影响相同. 然后列出递推式,上NTT+分治就可以了. 然后就可以与输入同阶处理答案了. #include <map> ...