1.创建数据库并插入数据
create database shop; use shop; CREATE TABLE ecs_goods ( goods_id INT UNSIGNED NOT NULL AUTO_INCREMENT, goods_name VARCHAR(32) NOT NULL, market_price VARCHAR(32) NOT NULL, PRIMARY KEY(goods_id)); select * from ecs_goods; INSERT INTO ecs_goods VALUES(1,'KD876','166.60'),(2,'KD111','164.60'); INSERT INTO ecs_goods VALUES(3,'KD876','169.60'),(4,'KD111','170.60'); INSERT INTO ecs_goods VALUES(5,'KD876','177.60'),(6,'KD111','179.60'); INSERT INTO ecs_goods VALUES(7,'KD876','187.60'),(8,'KD111','199.60'); INSERT INTO ecs_goods VALUES(9,'KD876','1607.60'),(10,'KD111','1609.60'); 2.编写page.class.php程序实现商品分页的功能 <?php class page{ private $total;//总页数 private $size;//每页记录数 private $url;//url地址 private $page;//当前页码 /** *@param $total 总记录数 *@param $size 每页记录数 *@param $url URL地址 */ public function __construct($total,$size,$url='') { //计算页数，向上取证 $this->total = ceil($total/$size); //每页的记录数 $this->size = $size; //为URL添加GET参数 $this->url = $this->setUrl($url); //获得当前页码 $this->page = $this->getNowPage(); } /** *获得当前页码 */ private function getNowPage() { $page = !empty($_GET['page']) ? $_GET['page']:1; if($page<1){ $this->page = 1; }else if($page> $this->total){ $page = $this->total; } return $page; } /** *位URL添加Get参数，去掉page参数 */ private function setUrl($url) { $url .='?'; foreach ($_GET as $k => $v) { if($k!='page'){ $url.="$k=$v&"; } } return $url; } /** *获得分页导航 */ public function getPageList(){ //总页数不超过1时直接返回空结果 if($this->total<=1) { return ''; } //拼接分页导航的HTML $html =''; if($this->page>4){ $html ="<a href=\"#\" onclick =\"getGoods('{$this->url}page=1')\">1</a>..."; } for ($i=$this->page-3,$len=$this->page+3 ;$i<=$len && $i<=$this->total; $i++){ if($i>0){ if($i == $this->page){ $html .="<a href=\"#\" onclick =\"getGoods('{$this->url}page=$i')\" class = \"curr\">$i</a>"; }else { $html .="<a href=\"#\" onclick =\"getGoods('{$this->url}page=$i')\">$i</a>"; } } } if ($this->page+3<$this->total) { $html .="...<a href=\"#\" onclick =\"getGoods('{$this->url}page={$this->total}')\">{$this->total}</a>"; } return $html; } public function getLimit(){ if ($this->total == 0) { return '0,0'; } return ($this->page-1)*$this->size.",{$this->size}"; } } ?>3.创建获取商品列表的data.php程序，实现每页显示3条记录的功能。 <?php header("Content-Type:text/html;charset=utf-8"); //引入分页类 include "./page.class.php"; //使用PDO连接数据库 //数据库服务器类型是MySQL $dbms ='mysql'; //数据库服务器主机名，端口号，选择的数据库 $host = 'localhost'; $port = '3306'; $dbname = 'shop'; //用户名和密码 $user = 'root'; $pwd = 'newpassword'; $dsn = "$dbms:host=$host;port=$port;dbname=$dbname"; //设定字符集 $options = array(PDO::MYSQL_ATTR_INIT_COMMAND=>'SET NAMES \'UTF8\''); //创建数据库连接 try { $pdo = new PDO($dsn,$user,$pwd,$options); //echo 'PDO数据库连接成功！'; //SQL预处理语句 $stmt1 = $pdo->query("select count(*) from ecs_goods"); //var_dump($stmt1); //实例化分页类对象 $total = $stmt1->fetchColumn(); $per = 3; $page = new page($total,$per,'./data.php'); //执行SQL语句 $stmt = $pdo->prepare("select goods_id,goods_name,market_price from ecs_goods limit ".$page->getLimit()); //获得页码列表信息 $pageList = $page->getPageList(); //执行SQL预处理语句 $stmt->execute(); } catch(PDOException $e) { echo $e->getMessage().'<br>'; } //查询-结果 $data = $stmt ->fetchAll(PDO::FETCH_ASSOC); //将分页信息追加到$data数组中 $data[] = $pageList; //输出页面 //var_dump($data); echo json_encode($data); ?>4.创建一个home.html文件，使用Ajax获取服务器端的数据 <!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>商品列表</title> <script type="text/javascript"> //通过页面加载事件实现分页数据获取 function getGoods(url){ //通过Ajax对象获得分页信息 var obj = new XMLHttpRequest(); obj.onreadystatechange =function(){ if (obj.readyState == 4 && obj.status ==200 ) { //接收服务器的相应信息 //alert("obj.responseText:"+obj.responseText); var info = eval('('+obj.responseText+')'); //alert("obj.responseText:"+info[1].goods_name); alert("info.length:"+info[info.length-1]); //console.log("info"); //拼接输出字符串 var dataList = "<tr><td>ID</td><td>名称</td><td>价格</td></tr>"; for (var i = 0; i < info.length-1; i++) { dataList += "<tr><td>"+info[i].goods_id+"</td>"; dataList += "<td>"+info[i].goods_name+"</td>"; dataList += "<td>"+info[i].market_price+"</td></tr>"; } dataList += "<tr><td colspan=3>"+info[info.length-1]+"</td></tr>"; //将字符串写入网页 document.getElementById('result').innerHTML = dataList; } } obj.open('get',url); obj.send(); } window.onload = function(){ getGoods('./data.php'); } </script> <style type="text/css"> table{width: 600px; cellspacing 2px;background-color:#333333;} tr{height: 30px;} td{width: 200px;background-color: #ffffff;text-align: center;} h2{text-align: center;} .curr{background-color: #f0f0f0;border:1px solid #999;} a:hover{background: #f0f0f0;border:1px solid #999} a{border:1px solid #fff;text-decoration: none;color: #999;padding: 2px 4px;margin:0 2px;line-height: 20px;} </style> </head> <body> <h2>Ajax实现商品列表无刷新分页</h2> <table id="result" align="center"></table> <div id="bottom" align="center"></div> </body> <script type="text/javascript"> //获取一个随机数，用于判断无刷新分页效果 var num ="随机数值："; num += Math.ceil(Math.random()*10); //将随机数字符串写入网页 document.getElementById('bottom').innerHTML = num; </script> </html>5.运行结果
