【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示
一、引言
做京东账户项目中的购物车模块,功能之二是购物车列表显示。要用到的是Apach环境,Mysql、PHP以及Ajax。
二、小功能-点击“去购物车结算”
小坑:Ajax动态生成的不能直接绑定,因为绑定时这个对象还不存在,要先找一个已存在的元素委托代理。
/***去购物车结算**/
$(document.body).on("click","#my_js",function(){
location.href = 'shoppingcart.html';
});
加载shoppingcart页头页尾
$("#header").load("data/header.php");
$("#footer").load("data/footer.php");
三、购物车列表显示
原理:页面加载后,异步请求当前登录用户购物车中商品信息
数据库表:已有的购物车表 产品表
创建php
①jd.sql ②init.php ③cart_list.php{购物车列表}
查询数据库
- 多表查询
- 购物车表 jd_cart{id/uid/productid/count}
- 产品表 jd_product{pid/pname/price/pic}
- 查询:mysql标准语法
- 查结果{购物车id/产品名称/产品图片/产品价格}
{购物车中该产品购买数量}
- 几张表,表名 jd_cart/jd_product
- 每一张表起一个别名 c/p
- 条件 = > < != c.productid = p.pid
<?php
header("Content-Type:application/json;charset=utf-8");
@$uid = $_REQUEST['uid']or die("-1");//获取用户id
require('init.php');
$sql = "SELECT c.id,p.pname,p.pic,p.price,c.count
FROM jd_cart c,jd_product p
WHERE c.productid=p.pid
AND c.uid = $uid";
$result = mysqli_query($conn,$sql);
$rows = mysqli_fetch_all($result,MYSQLI_ASSOC);
$str = json_encode($rows);
echo $str;
?>
<?php
$conn = mysqli_connect("127.0.0.1","root","","jd",3306);
mysqli_query($conn,"SET NAMES UTF8");
?>
测试 :http://127.0.0.1/jd_store/data/cart_list.php?uid=10 输出所有字符串
创建js{分析html/css}
①shoppingcart.html
②js/shoppingcartt.js
③js
$.ajax({
url:"data/cart_list.php",
data:{uid:10},
success:function(data){
var html = "";
for(var i=0;i<data.length;i++){
var obj = data[i];
html +=`
<tr>
<td>
<input type="checkbox"/>
<input type="hidden" value="${obj.pid}" />
<div><img src="${obj.pic}" alt=""/></div>
</td>
<td><a href="">${obj.pname}</a></td>
<td>${obj.price}</td>
<td>
<button>-</button><input type="text" value="${obj.count}"/><button>+</button>
</td>
<td><span>¥${obj.price*obj.count}</span></td>
<td><a href="${obj.id}">删除</a></td>
</tr>
`;
}
$("#cart tbody").html(html);
},
error:function(){
}
});
实现效果:
注:转载请注明出处
【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示的更多相关文章
- 【京东账户】——Mysql/PHP/Ajax爬坑之购物车删除选项
一.引言 做京东账户项目中的购物车模块,功能之三就是删除购物车中的选项.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:购物车表 jd ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之产品列表显示
一.引言 实现京东的账户项目,功能模块之一,产品列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:产品表 添加多条记录 /**产 ...
- 【京东账户】——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 创建表:登录表 添加三条记录 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官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...
随机推荐
- matplotlib 填充颜色
def huitu_host(nodes,total): x = np.arange(len(nodes)) plt.figure(figsize=(9,5)) plt.xticks(x,nodes) ...
- hdu1695 GCD(莫比乌斯入门题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1695 题意: 给出n.m.k ,求出1<=x<=n, 1<=y<=m 且gcd ...
- JSP慕课网之Session
会话保存在服务器的内存里. sessionId可以通过进入http://localhost:8888/进入Tomcat的Manager App进行查看,点击项目的sessions可以看到session ...
- struts分页实现
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- Java 反射之动态代理
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt205 利用Java反射机制你可以在运行期动态的创建接口的实现.java.la ...
- 协处理器CP15介绍—MCR/MRC指令(6)
概述:在基于ARM的嵌入式应用系统中,存储系统的操作通常是由协处理器CP15完成的.CP15包含16个32位的寄存器,其编号为0-15. 而访问CP15寄存器的指令主要是MCR和MRC这两个指令. 例 ...
- hdu 2503 1713 1108 最小公倍数&最大公约数
gcd模板: __int64 gcd(__int64 a,__int64 b) { retur b==0?a:gcd(b,a%b); } 1108: #include<iostream> ...
- NHibernate学习教程(6)--事务Transactions
本节内容 事务概述 1.新建对象 [测试成功提交] [测试失败回滚] 2.删除对象 3.更新对象 4.保存更新对象 结语 上一篇我们介绍了NHibernate中的Insert, Update, De ...
- 分而治之(Work Breakdown Structure, WBS)
不知道大家有没有和我一样的情况,就是想写一篇博客,不知道从何写起,如何组织语言,如何安排这篇博客的要交待的事情的前因后果:如果在写作过程中被打断,又不知道如何重新拾起键盘,从哪里写起."就如 ...