php-ajax实现无刷新分页

最新推荐文章于 2021-03-10 16:59:58 发布

原创最新推荐文章于 2021-03-10 16:59:58 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #php #无刷新分页 #异步请求

PHP实用技术专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的PHP分页类实现方法，包括分页类的构造、获取当前页码、为URL添加GET参数、获得分页导航等功能，并通过PDO连接数据库获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的分页类-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->page = $this->getNowPage();
		//每页记录数
		$this->size = $size;
		//为URL添加GET参数
		$this->url = $this->setUrl($url);
	}
	/**
	 * 获得当前页码
	 */
	private function getNowPage(){
		$page = empty($_GET['page']) ? 1 : $_GET['page'];
		if($page < 1){
			$page = 1;
		}else if($page > $this->total){
			$page = $this->total;
		}
		return $page;
	}
	/**
	 * 为URL添加GET参数，去掉page参数
	 */
	private function setUrl($file){
		$params = $_GET;
		unset($params['page']);
		$url = http_build_query($params);
		return $url ? "$file?$url&" : "$file?";
	}
	/**
	 * 获得分页导航
	 */
	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}";
	 }
}

从数据库中获取数据-data.php：

<?php
header("Content-Type:text/html;charset=utf-8");
//引入分页类
include "./page.class.php";
//使用PDO连接数据库
try{
	//实例化PDO创建
	$pdo = new PDO("mysql:host=127.0.0.1;dbname=shop;charset=utf8","root","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);

前台模板文件-index.php：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品列表</title>
    <script>
        function getGoods(url) {
            // 通过Ajax对象获得分页信息
            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>
</head>
<body>
    <h2>Ajax实现商品列表无刷新分页</h2>
    <table id="result" align="center">
    </table>
    <div id="bottom" align="center"><div>

    <script type="text/javascript">
        //获取一个随机数，用于判断无刷新分页效果
        var num = "随机数值：";
         num += Math.ceil(Math.random()*10);
         //将随机数字符串写入到网页中
        document.getElementById('bottom').innerHTML = num;
    </script>
</body>
</html>

原文地址：https://blog.youkuaiyun.com/qq_42195688/article/details/80372632