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

【京东账户】——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);
})

 

posted @ 2017-09-27 17:05 柳洁琼Elena 阅读( ...) 评论( ...) 编辑 收藏