使用 PHP 原生 MySQL 与 XMLHttpRequest 实现无刷新分页

Jasper

发布时间：2026-10-14 | 4人浏览过

原创

通过结合原生PHP后端逻辑与JavaScript的XMLHttpRequest对象，可以实现无需重载页面的数据分页功能。本文将拆解index.php、ajaxpg.js及CSS文件的核心代码，演示如何构建基于传统技术的异步分页系统。

核心功能与结构

该方案旨在通过前端异步请求获取指定页码的数据，并替换页面局部内容。主要涉及四个部分：

index.php: 负责数据库连接、分页计算及HTML渲染。
ajaxpg.js: 封装XMLHttpRequest对象，处理HTTP请求与响应。
page.css: 定义分页导航的样式。
SQL脚本: 提供测试用的数据库表结构与初始数据。

准备工作

数据库配置: 确保本地或服务器已安装MySQL，并创建名为 demo 的数据库。导入提供的 brand.sql 文件以填充测试数据（表名 brand）。
文件布局: 在Web服务器根目录下建立文件结构：
- index.php（主文件） - ajaxpg.js（JS脚本） - page.css（样式文件）
环境检查: 本示例基于较早期的PHP版本（如5.x）和原生DOM技术编写。若在现代PHP 7/8环境中运行，需注意废弃的函数（如 mysql_connect），实际生产中建议迁移至 PDO 或 mysqli。

第1步：配置主页面逻辑 (index.php)

此文件包含分页的核心算法与前端视图。它接收URL参数中的 page 值，计算偏移量，并从数据库查询数据。

1.1 引入资源与初始化

首先设置字符编码以避免乱码，并引入外部JS与CSS文件：

<?php 
header("Content-type: text/html;charset=GBK"); // 注意：根据实际数据库字符集调整，若为utf8则改为utf-8
?>
<html>
<head>
<title>ajax分页演示</title>
<script language="javascript" src="ajaxpg.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>

1.2 分页参数计算

从GET请求中获取当前页码，默认为1。设定每页显示数量（例如 $num=10 或代码中的3用于测试），并连接数据库：

$page=isset($_GET['page'])?intval($_GET['page']):1;
$num=3; // 每页显示条数，调试时可调整为10或其他值

$db=mysql_connect("localhost","root","123456"); // 请替换为您的数据库账号密码
mysql_select_db("demo",$db) or die("数据库链接错误");
mysql_query("set names gbk"); // 若数据库为utf8，请改为 set names utf8

1.3 数据总量与页码范围

查询总记录数以计算总页数，并确定当前页是否在有效范围内：

$result=mysql_query("select * from brand");
$total=mysql_num_rows($result);
$url='index.php'; // AJAX提交的URL，指向自身以获取新页数据
$pagenum=ceil($total/$num);
$page=min($pagenum,$page); // 防止页码超出总数
$prepg=$page-1; // 上一页
$nextpg=($page==$pagenum ? 0 : $page+1); // 下一页，末页时设为0表示不可用
$offset=($page-1)*$num; // SQL LIMIT 的第一个参数

1.4 生成分页导航HTML

构建导航条字符串，包含首页、上一页、下一页、尾页及当前页信息。点击事件绑定到JS函数 dopage：

$pagenav="<ul>";
$pagenav.="<li>显示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+$num,$total)."</B> 条记录</li>";
if($pagenum<=1) { /* 只有一页，无需分页 */ } else {
    $pagenav.="<li><a href=javascript:dopage('results','$url?page=1')>首页</a></li>";
    if($prepg) $pagenav.="<li><a href=javascript:dopage('results','$url?page=$prepg')>前页</a></li>";
    else $pagenav.="<li>前页</li>";
    if($nextpg) $pagenav.="<li><a href=javascript:dopage('results','$url?page=$nextpg')>后页</a></li>";
    else $pagenav.="<li>后页</li>";
    $pagenav.="<li><a href=javascript:dopage('results','$url?page=$pagenum')>尾页</a></li>";
}
$pagenav.="<li>第 $page 页 / 共 $pagenum 页</li></ul>";

第2步：实现Ajax异步请求 (ajaxpg.js)

JavaScript文件负责处理浏览器兼容性并发起HTTP GET请求。核心流程如下：

2.1 创建XHR对象

支持Mozilla系（使用 XMLHttpRequest）和IE浏览器（使用 ActiveXObject）。这是旧版浏览器的兼容写法，现代开发可直接使用 new XMLHttpRequest() 或 fetch/Axios。

var http_request=false;
function send_request(url){
    http_request=false;
    if(window.XMLHttpRequest){
        http_request=new XMLHttpRequest();
        if(http_request.overrideMimeType) http_request.overrideMimeType("text/xml");
    }
    else if(window.ActiveXObject){
        try{ http_request=new ActiveXObject("Msxml2.XMLHttp"); }
        catch(e){
            try{ http_request=new ActiveXObject("Microsoft.XMLHttp"); }
            catch(e){} 
        }
    }
    if(!http_request){
        window.alert("创建XMLHttp对象失败！");
        return false;
    }
    http_request.onreadystatechange=processrequest;
    http_request.open("GET",url,true);
    http_request.send(null);
}

2.2 处理响应

当请求状态为4（完成）且状态码为200（成功）时，将返回的HTML文本插入到指定的DOM元素中：

function processrequest(){
    if(http_request.readyState==4){
        if(http_request.status==200){
            document.getElementById(reobj).innerHTML=http_request.responseText;
        }else{
            alert("您所请求的页面不正常！");
        }
    }
}

// 触发函数
var reobj="";
function dopage(obj,url){
    document.getElementById(obj).innerHTML="<font color='green'>正在读取数据...</font>";
    send_request(url);
    reobj=obj; // 保存目标容器ID
}

第3步：配置样式与数据库

CSS样式 (page.css):

简单的列表样式，确保分页按钮横向排列且美观：

#result ul li {
    height:20px; width:auto; display:block; float:left;
    list-style:none; margin-left:5px; border:1px solid #999;
    background:#09C; color:#fff; text-decoration:none;
}
#result ul li a:hover { color:#F60; }

数据库 (SQL):

确保数据库中存在 brand 表，结构如下：

CREATE TABLE `brand` (
  `id` int(7) NOT NULL auto_increment,
  `sp_brand` varchar(255) default NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ;
-- 需插入相应测试数据

完成判断与常见问题

完成后打开 index.php，点击“下一页”观察页面是否仅更新数据区域而整体不刷新。若出现乱码，请检查PHP的 header 设置、数据库连接时的 set names 指令以及HTML页面的charset是否一致（均为GBK或UTF-8）。若在现代PHP版本中报错，主要是因为 mysql_*_connect 系列函数已被移除。解决方法是将数据库连接替换为 mysqli 或 PDO，并修正相应的查询语句。以上就是PHP + Ajax实现无刷新数据分页的详细内容，更多关于PHP分页,Ajax无刷新,原生MySQL,javascript分页,xhr对象的资料请关注本站其它相关文章！