Ajax实现无刷新分页

最新推荐文章于 2018-08-21 11:05:02 发布

烟囱土著

最新推荐文章于 2018-08-21 11:05:02 发布

阅读量455

点赞数

分类专栏：起步文章标签： ajax 服务器数据无刷新分页

起步专栏收录该内容

22 篇文章 0 订阅

订阅专栏

创建一个home.html文件，使用Ajax获取服务器端的数据

<!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=\"#\" οnclick=\"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=\"#\" οnclick=\"getGoods('{$this->url}page=$i')\" class=\"curr\">$i</a>";
				}else{ 
					$html .= " <a href=\"#\" οnclick=\"getGoods('{$this->url}page=$i')\">$i</a> ";
				}
			}
		}
		if($this->page+3<$this->total){
			$html .= " ... <a href=\"#\" οnclick=\"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);

烟囱土著

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现无刷新分页

创建一个home.html文件，使用Ajax获取服务器端的数据<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 商品列表 //通过页面加载事件实现分页数据获取 f
复制链接

扫一扫