PHP+Ajax+JSON实现页面无刷新分页内容显示

php小学一年级生

于 2018-06-03 11:52:39 发布

2371

本文链接：https://blog.csdn.net/l269798518/article/details/80555380

版权

数据库创建以及测试数据插入示例：

create table goods(
	goods_id int unsigned not null primary key auto_increment,
	goods_name varchar(32) not null,
	market_price float not null
);
insert into goods values(null, '测试1', 32.43);
insert into goods values(null, '测试2', 32.43);
insert into goods values(null, '测试3', 32.43);
insert into goods values(null, '测试4', 32.43);
insert into goods values(null, '测试5', 32.43);
insert into goods values(null, '测试6', 32.43);
insert into goods values(null, '测试7', 32.43);
insert into goods values(null, '测试8', 32.43);
insert into goods values(null, '测试9', 32.43);
insert into goods values(null, '测试10', 32.43);
insert into goods values(null, '测试11', 32.43);
insert into goods values(null, '测试12', 32.43);
insert into goods values(null, '测试13', 32.43);
insert into goods values(null, '测试14', 32.43);
insert into goods values(null, '测试15', 32.43);
insert into goods values(null, '测试16', 32.43);
insert into goods values(null, '测试17', 32.43);

分页类的实现：

class page
	{
		private $total;  //总记录数
		private $size;  //每页记录数
		private $url; //URL地址
		private $page;  //当前页码

		// 构造方法
		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']) ? 1 : $_GET['page'];
			if ($page < 1) {
				$page = 1;
			} elseif($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=\"#\" ο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}";
		}
	}

数据库连接查询data.php

<?php 
	header('Content-type:text/html; charset=utf-8');
	// 引入分页类
	require('./page.class.php');

	// 使用PDO连接数据库
	try {
		$pdo = new PDO("mysql:dbname=shop;charset=utf8", "root", "root");
		// 设置字符集编码
		$pdo->query("set names utf8");
		// SQL预处理语句
		$stmt1 = $pdo->query("select count(*) from goods");

		// 实例化分页类对象
		$total = $stmt1->fetchColumn();
		$per = 3;
		$page = new page($total, $per, './data.php');
		$stmt = $pdo->prepare("select goods_id,goods_name,market_price from goods limit ".$page->getLimit());
		// 获得页码列表信息
		$pagelist = $page->getPageList();
		// 执行SQl语句
		$stmt->execute();

	} catch(Exception $e) {
		echo $e->getMessage()."<br>";
	}

	// 查询结果
	$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
	$data[] = $pagelist;  //将分页信息追加到$data数组中
	// 输出页面
	echo json_encode($data);
 ?>

主页面：index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品列表</title>
	<script type="text/javascript">
		function getGoods(url) {
			// 通过Ajax对象获得分页信息
			var obj = new XMLHttpRequest();
			// 感知Ajax状态
			obj.onreadystatechange = function() {
				if (obj.status == 200 && obj.readyState == 4) {
					// 接收服务器端的响应信息
					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">
		table {
			width: 600px;
		}
		tr {
			height: 30px;
		}
		td {
			width: 200px;
			text-align: center;
		}
		h2 {
			text-align: center;
		}
	</style>
</head>
<body>
	<h2>Ajax实现商品列表无刷新分页</h2>
	<table border="1" 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>