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.运行结果