Ajax实现无刷新分页
2016-03-08 18:07
225 查看
创建一个home.html文件，使用Ajax获取服务器端的数据
创建一个获取商品列表的data.php文件,实现每页3条记录的功能
<?php
header("Content-Type:text/html;charset=utf-8");
//引入分页类
require "page.class.php";
//使用PDO连接数据库
try{
//实例化PDO创建
$pdo = new PDO("mysql:host=127.0.0.1;dbname=shop;charset=utf8","root","");
//设置字符集编码
$pdo->query("set names utf8");
//SQL预处理语句
$stmt1 = $pdo->query("select count(*) from `ecs_goods`");
//实例化分页类对象
$total = $stmt1->fetchColumn();
$per = 3;
$page = new Page($total,$per,'data.php');
$stmt = $pdo->prepare("select goods_id,goods_name,market_price from `ecs_goods` limit ".$page->getLimit());
//获得页码列表信息
$pageList = $page->getPageList();
//执行SQL预处理语句
$stmt->execute();
}
catch(Exception $e){
echo $e->getMessage().'<br>';
}
//查询结果
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//将分页信息追加到$data数组中
$data[] = $pageList;
//输出页面
echo json_encode($data);
?>
创建一个实现商品列表分页的功能的类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;
//获得当前页码
//由于在setUrl()方法里使用了unset($_GET['page'])，所以getNowPage()方法必须调用在setUrl()方法之前
$this->page = $this->getNowPage();
//为URL添加GET参数
$this->url = $this->setUrl($url);
}
/**
* 获得当前页码
*/
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 .= '?';
//去掉page参数
unset($_GET['page']);
foreach($_GET as $k=>$v){
$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;
}
/**
* 获得SQL中的limit
*/
public function getLimit(){
if($this->total == 0){
return '0, 0';
}
return ($this->page - 1) * $this->size . ", {$this->size}";
}
}
?>
数据库文件
#创建shop数据库（如果该数据库不存在）
create database if not exists `shop`;
use `shop`;
#创建数据表：商品表
create table if not exists `ecs_goods` (
`goods_id` int unsigned NOT NULL PRIMARY KEY AUTO_INCREMENT comment 'ID',
`goods_name` varchar(50) NOT NULL comment '商品名',
`market_price` decimal(10,2) NOT NULL comment '价格'
) default charset=utf8;
#插入数据:`ecs_goods`
insert into `ecs_goods` values
(1,'KD876',1665.60),
(3,'诺基亚原装5800耳机',81.60),
(4,'诺基亚N85原装充电器',69.60),
(5,'索爱原装M2卡读卡器',24.00),
(6,'胜创KINGMAX内存卡',50.40),
(7,'诺基亚N85原装立体声耳机HS-82',120.00),
(8,'飞利浦9@9v',478.79),
(9,'诺基亚E66',2757.60),
(10,'索爱C702c',1593.60),
(11,'索爱C702c',0.00),
(12,'摩托罗拉A810',1179.60),
(13,'诺基亚5320 XpressMusic',1573.20),
(14,'诺基亚5800XM',3150.00),
(15,'摩托罗拉A810',945.60),
(16,'恒基伟业G101',988.00),
(17,'夏新N7',2760.00),
(18,'夏新T5',3453.60),
(19,'三星SGH-F258',1029.60),
(20,'三星BC01',336.00),
(21,'金立 A30',2400.00),
(22,'多普达Touch HD',7198.80),
(23,'诺基亚N96',4440.00),
(24,'P806',2400.00),
(25,'小灵通/固话50元充值卡',57.59),
(26,'小灵通/固话20元充值卡',22.80),
(27,'联通100元充值卡',100.00),
(28,'联通50元充值卡',50.00),
(29,'移动100元充值卡',0.00),
(30,'移动20元充值卡',21.00),
(31,'摩托罗拉E8',1604.39);
<!DOCTYPE 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" lang="en_US" xml:lang="en_US">
<head>
<title>商品列表</title>
<script type="text/javascript">
//通过页面加载事件实现分页数据获取
function getGoods(url){
//通过AJAX对象获得分页信息
//创建对象
//判断用户的浏览器，决定使用何种方式Ajax对象
if(typeof ActiveXObject != "undefined"){
var version = ['Msxm12.XMLHTTP.6.0','Msxm12.XMLHTTP.5.0','Msxm12.XMLHTTP.3.0','Msxm12.XMLHTTP','Microsoft.XMLHTTP'];
for(var i =0;i<=version.length;i++){
try{
var obj = new ActiveXObject(version[i]);
if(typeof obj != "undefined"){
break;
}
}
catch(ex){}
}
}else{
var obj = new XMLHttpRequest();
}
obj.onreadystatechange = function(){
if(obj.readyState == 4 && obj.status == 200){
//接收服务器端的响应信息
eval(" var info="+obj.responseText);
//拼接输出的字符串
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">
a{border:1px solid #fff;text-decoration:none;color:#999;padding:2px 4px;margin:0 2px;line-height:20px;}
a:hover{background:#f0f0f0;border:1px solid #999;}
.curr{background:#f0f0f0;border:1px solid #999;}
table{width:600px;cellspacing:2px;background-color:#333333;}
tr{height:30px}
td{width:200px;background-color:#FFFFFF;text-align:center;}
h2{text-align:center}
</style>
</tom>
<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>创建一个获取商品列表的data.php文件,实现每页3条记录的功能
<?php
header("Content-Type:text/html;charset=utf-8");
//引入分页类
require "page.class.php";
//使用PDO连接数据库
try{
//实例化PDO创建
$pdo = new PDO("mysql:host=127.0.0.1;dbname=shop;charset=utf8","root","");
//设置字符集编码
$pdo->query("set names utf8");
//SQL预处理语句
$stmt1 = $pdo->query("select count(*) from `ecs_goods`");
//实例化分页类对象
$total = $stmt1->fetchColumn();
$per = 3;
$page = new Page($total,$per,'data.php');
$stmt = $pdo->prepare("select goods_id,goods_name,market_price from `ecs_goods` limit ".$page->getLimit());
//获得页码列表信息
$pageList = $page->getPageList();
//执行SQL预处理语句
$stmt->execute();
}
catch(Exception $e){
echo $e->getMessage().'<br>';
}
//查询结果
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//将分页信息追加到$data数组中
$data[] = $pageList;
//输出页面
echo json_encode($data);
?>
创建一个实现商品列表分页的功能的类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;
//获得当前页码
//由于在setUrl()方法里使用了unset($_GET['page'])，所以getNowPage()方法必须调用在setUrl()方法之前
$this->page = $this->getNowPage();
//为URL添加GET参数
$this->url = $this->setUrl($url);
}
/**
* 获得当前页码
*/
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 .= '?';
//去掉page参数
unset($_GET['page']);
foreach($_GET as $k=>$v){
$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;
}
/**
* 获得SQL中的limit
*/
public function getLimit(){
if($this->total == 0){
return '0, 0';
}
return ($this->page - 1) * $this->size . ", {$this->size}";
}
}
?>
数据库文件
#创建shop数据库（如果该数据库不存在）
create database if not exists `shop`;
use `shop`;
#创建数据表：商品表
create table if not exists `ecs_goods` (
`goods_id` int unsigned NOT NULL PRIMARY KEY AUTO_INCREMENT comment 'ID',
`goods_name` varchar(50) NOT NULL comment '商品名',
`market_price` decimal(10,2) NOT NULL comment '价格'
) default charset=utf8;
#插入数据:`ecs_goods`
insert into `ecs_goods` values
(1,'KD876',1665.60),
(3,'诺基亚原装5800耳机',81.60),
(4,'诺基亚N85原装充电器',69.60),
(5,'索爱原装M2卡读卡器',24.00),
(6,'胜创KINGMAX内存卡',50.40),
(7,'诺基亚N85原装立体声耳机HS-82',120.00),
(8,'飞利浦9@9v',478.79),
(9,'诺基亚E66',2757.60),
(10,'索爱C702c',1593.60),
(11,'索爱C702c',0.00),
(12,'摩托罗拉A810',1179.60),
(13,'诺基亚5320 XpressMusic',1573.20),
(14,'诺基亚5800XM',3150.00),
(15,'摩托罗拉A810',945.60),
(16,'恒基伟业G101',988.00),
(17,'夏新N7',2760.00),
(18,'夏新T5',3453.60),
(19,'三星SGH-F258',1029.60),
(20,'三星BC01',336.00),
(21,'金立 A30',2400.00),
(22,'多普达Touch HD',7198.80),
(23,'诺基亚N96',4440.00),
(24,'P806',2400.00),
(25,'小灵通/固话50元充值卡',57.59),
(26,'小灵通/固话20元充值卡',22.80),
(27,'联通100元充值卡',100.00),
(28,'联通50元充值卡',50.00),
(29,'移动100元充值卡',0.00),
(30,'移动20元充值卡',21.00),
(31,'摩托罗拉E8',1604.39);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐