【京东账户】——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。
实现效果:
五、小功能-修改购物车项目数量
创建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爬坑之购物车删除选项的更多相关文章
- 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示
一.引言 做京东账户项目中的购物车模块,功能之二是购物车列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.小功能-点击“去购物车结算” 小坑:Ajax动态生成的不能直接绑定,因 ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表分页
一.引言 做京东账户项目中的购物车模块,功能之四就是购物车列表的分页显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.查询数据 mysql: SELECT * FROM jd_pr ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车
一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车" 添加成功 ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之页头页尾加载
一.引言 实现京东的账户项目,有一个小功能,页头页尾加载.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.实现 原理: 用php文件分别写一个的页头和一个页尾,放在前后两个div里. ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之产品列表显示
一.引言 实现京东的账户项目,功能模块之一,产品列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:产品表 添加多条记录 /**产 ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之用户登录
一.引言 实现京东的账户项目,功能模块之一,用户登录.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:登录表 添加三条记录 CREATE ...
- 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页
前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...
- 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)
前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...
- 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结
前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...
随机推荐
- HDU5857 Median 模拟
Median HDU - 5857 There is a sorted sequence A of length n. Give you m queries, each one contains fo ...
- java 课堂笔记
- android下拉弹出动画
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http:// ...
- 欧拉回路基础 HDU1878 欧拉回路||并差集
欢迎参加——每周六晚的BestCoder(有米!) 欧拉回路 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- Fragment控件初始化
代码改变世界 Fragment控件初始化 @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup ...
- (转)对称加密与非对称加密,以及RSA的原理
一 概述 二对称加密和非对称加密 对称加密 非对称加密 区别 三RSA原理 整数运算 同余运算 当模数为合数n时 当模数为质数p的时候 离散对数问题 RSA原理 一 , 概述 在现代密码学诞生以前,就 ...
- 【bzoj3771】Triple FFT+容斥原理
题目描述 樵夫的每一把斧头都有一个价值,不同斧头的价值不同.总损失就是丢掉的斧头价值和. 他想对于每个可能的总损失,计算有几种可能的方案. 注意:如果水神拿走了两把斧头a和b,(a,b)和(b,a)视 ...
- P4513 小白逛公园
题目背景 小新经常陪小白去公园玩,也就是所谓的遛狗啦… 题目描述 在小新家附近有一条“公园路”,路的一边从南到北依次排着 nnn 个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. 一开始,小白 ...
- 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 ...
- ZOJ 3874 Permutation Graph ——分治 NTT
发现每一块一定是按照一定的顺序的. 然后与标号无关,并且相同大小的对答案的影响相同. 然后列出递推式,上NTT+分治就可以了. 然后就可以与输入同阶处理答案了. #include <map> ...