一、引言

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

【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表分页的更多相关文章

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

    一.引言 做京东账户项目中的购物车模块,功能之二是购物车列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.小功能-点击“去购物车结算” 小坑:Ajax动态生成的不能直接绑定,因 ...

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

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

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

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

  4. 【京东账户】——Mysql/PHP/Ajax爬坑之用户登录

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

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

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

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

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

  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. sql2008查看备份进度

    SELECT session_id, request_id, start_time, status, command, sql_handle --,statement_start_offset, st ...

  2. getRequestURI,getRequestURL的区别,获取各种路径的方法

    getRequestURI,getRequestURL的区别 test1.jsp======================= <a href ="test.jsp?p=fuck&qu ...

  3. HDU 2065 "红色病毒"问题 ——快速幂 生成函数

    $A(x)=1+x^2/2!+x^4/4!...$ $A(x)=1+x^1/1!+x^2/2!...$ 然后把生成函数弄出来. 暴力手算. 发现结论. 直接是$4^{n-1}+2^{n-1}$ 然后快 ...

  4. web标准,可用性和可访问性

    web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...

  5. [JSOI2007]建筑抢修 (贪心)

    题目链接 Solution 可以考虑 \(dp\) ,但是很显然 \((n^2)\) 降不下来. 然后考虑贪心,首先,绝对的正确的是,在同等的情况下,给后面的留更多的时间. 首先按照 \(T_2\) ...

  6. linux命令 显示文件内容

    通过命令+文件名查看内容.如下命令可以查看.1, cat :由第一行开始显示文件内容:2,tac:从最后一行开始显示,可以看出tac与cat字母顺序相反:3,nl:显示的时候输出行号:4,more:一 ...

  7. nodeJS学习(4)--- webstorm/...开发 NodeJS 项目-节1

    前提: 已安装好 IDE ,eg:webstorm/IDEA 2016.3 & 2017.1 nodeJS(含 npm 及 相应的模板等) 要用 webstorm 开发 NodeJS项目(we ...

  8. HDU2767 Proving Equivalences

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  9. Entity Framework context per request

    原文发布时间为:2011-09-24 -- 来源于本人的百度文章 [由搬家工具导入] http://www.blog.cyberkinetx.com/2011/05/15/entity-framewo ...

  10. [LeetCode] Number of 1 Bits 位操作

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...