PHP-Ajax实现无刷新分页

最新推荐文章于 2024-05-12 00:45:00 发布

BUS375

最新推荐文章于 2024-05-12 00:45:00 发布

阅读量3.9k

点赞数 1

分类专栏： PHP

本文链接：https://blog.csdn.net/bbs375/article/details/52210502

版权

PHP 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

BUS375

关注

1
点赞
踩
4

收藏

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

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
复制链接

扫一扫

专栏目录