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

一、引言

做京东账户项目中的购物车模块，功能之四就是购物车列表的分页显示。要用到的是Apach环境，Mysql、PHP以及Ajax。

二、查询数据

mysql:
SELECT * FROM jd_product LIMIT ?,?
?    启动记录行       0
?    查询几行记录

1:SELECT * FROM jd_product LIMIT 0,8;
2:SELECT * FROM jd_product LIMIT 8,8;
3:SELECT * FROM jd_product LIMIT 16,8;

页数  启始记录
1----->0       (页数-1)*8;  (1-1)*8=0
2----->8                   (2-1)*8=8
3----->16                  (3-1)*8=16

三、修改程序

//product.php

$sql = "SELECT * FROM jd_product LIMIT 0,8";//不妥：写死了不合适，这么写永远查的是第一页

<?php
header("Content-Type:application/json;charset=utf-8");
require('init.php');
//获取参数：页面
@$pageNo = $_REQUEST['pageNo'];
$offset = ($pageNo-1)*8;
$sql = "SELECT * FROM jd_product LIMIT $offset,8";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_all($result,MYSQLI_ASSOC);
$str = json_encode($row);
echo $str;
?>

//product.js
url:'data/product_list.php?pageNo=1',//不妥：写死了不合适，这么写永远查的是第一页

/***产品列表显示***/loadPage(1);
function loadPage(page){
$.ajax({
url:'data/product_list.php?pageNo='+page,
success:function(data){
var html = "";
for(var i=0;i<data.length;i++){
var obj = data[i];
html += `
<li>
<a href=""><img src="${obj.pic}" alt=""/></a>
<p>${obj.price}</p>
<h1><a href="">${obj.pname}</a></h1>
<div>
<a href="#" class="contrast"><i></i>对比</a>
<a href="#" class="p-operate"><i></i>关注</a>
<a href="${obj.pid}" class="addcart"><i></i>加入购物车</a>
</div>
</li>
`;
}
$("#plist ul").html(html);
},
error:function(){
alert("请求商品列表出错，请检查网络！");
}
});
}

/***分页处理***/
$("ol.pager a").click(function(e){
e.preventDefault();
var p = $(this).html();
loadPage(p);
})