一、引言

做京东账户项目中的购物车模块,功能之二是购物车列表显示。要用到的是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{购物车列表}

查询数据库

  • 多表查询
  1. 购物车表       jd_cart{id/uid/productid/count}
  2. 产品表           jd_product{pid/pname/price/pic}
  • 查询:mysql标准语法
  • 查结果{购物车id/产品名称/产品图片/产品价格}

{购物车中该产品购买数量}

  1. 几张表,表名                 jd_cart/jd_product
  2. 每一张表起一个别名       c/p
  3. 条件 = > < !=                  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爬坑之购物车列表显示的更多相关文章

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

    一.引言 做京东账户项目中的购物车模块,功能之三就是删除购物车中的选项.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:购物车表  jd ...

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

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

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

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

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

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

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

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

  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. 【JavaScript】Js控制页面所有元素只读

    在页面初始化加载以下readOnlyPage()方法,可实现所有元素只读,方便实用. <script language="javascript"> function r ...

  2. 关于JDBC导入mysql的jar驱动的头痛

    今天上午想写个小程序,需要调用数据库,查了书和各个博客. 最后卡在导入mysql驱动上了,花了1个多小时才让程序连上数据库. 这里有个小误区,你下载的是zip压缩文件,很多帖子写的都是让你导入驱动,但 ...

  3. Sass初学者超强十分钟入门

    ruby安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选 ...

  4. 超简单使用批处理(batch)操作数据库

    超简单使用批处理(batch)操作数据库 批处理(batch)是什么 批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...

  5. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

    整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...

  6. lucene&solr-day1

        全文检索课程 Lucene&Solr(1) 1.   计划 第一天:Lucene的基础知识 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a)   ...

  7. 第3阶段——内核启动分析之start_kernel初始化函数(5)

    内核启动分析之start_kernel初始化函数(init/main.c) stext函数启动内核后,就开始进入start_kernel初始化各个函数, 下面只是浅尝辄止的描述一下函数的功能,很多函数 ...

  8. Linux安装简介

    一.基本简介 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. Linux能运行主要的UNIX工具软件.应用程序 ...

  9. mysql添加外键约束变为索引

    今天有位自己填上一坑:mysql储存引擎 原因就是数据库表引擎为:MyISAM,建立主外键关系需要是InnoDB: 解决方案:alter  table table_name1  engine=inno ...

  10. java初阶

    java的开发工具分成 IDE(integrated developmentenvironment )和JDk(Java Development Kit) 一个.java中只能有一个public类且至 ...