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

时间:2022-01-25 16:56:22

一、引言

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

 三、购物车列表显示

原理:页面加载后,异步请求当前登录用户购物车中商品信息

数据库表:已有的购物车表   产品表

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

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

创建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

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

<?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爬坑之购物车列表显示


注:转载请注明出处