您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP + AJAX 無刷新分頁完整實現：從原理到生產級代碼

編輯：PHP 相關知識

PHP + AJAX 無刷新分頁完整實現：從原理到生產級代碼

傳統分頁每次跳轉需整頁重載，用戶體驗差。結合 PHP 後端與 AJAX 前端，可實現局部刷新分頁，僅更新數據區域，大幅提升交互流暢度。本文從底層 XMLHttpRequest 封裝、後端分頁邏輯、前端交互三層完整講解。

核心架構

前端：原生 JS 封裝 XMLHttpRequest，提供 send_request()、processrequest()、dopage() 三大函數
後端：PHP 接收 page 參數，查詢數據庫，輸出 HTML 片段 (含數據列表 + 分頁導航)
容器：頁面預留 <div id="result"> 作為 AJAX 更新目標區域

前端 AJAX 引擎 (ajaxpg.js)

var http_request = false;
var reobj = '';  // 目標容器 ID

// 發送請求入口
function send_request(url) {
    http_request = false;
    // 1. 創建 XMLHttpRequest 對象 (兼容 IE6+)
    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) { alert('創建 XMLHttpRequest 失敗！'); return false; }

    // 2. 註冊回調
    http_request.onreadystatechange = processrequest;

    // 3. 發送 GET 請求
    http_request.open('GET', url, true);  // true = 異步
    http_request.send(null);
}

// 回調處理
function processrequest() {
    if (http_request.readyState == 4) {  // 請求完成
        if (http_request.status == 200) {  // HTTP 成功
            document.getElementById(reobj).innerHTML = http_request.responseText;
        } else {
            alert('您所請求的頁面不正常！');
        }
    }
}

// 分頁觸發入口
function dopage(obj, url) {
    document.getElementById(obj).innerHTML = '正在讀取數據...';
    send_request(url);
    reobj = obj;
}

後端分頁邏輯 (test.php / 邏輯分離版)

核心 SQL：SELECT * FROM table LIMIT offset, pageSize

offset = (page - 1) * pageSize
pageSize：每頁條數 (如 10)

<?php
header("Content-type: text/html; charset=GBK");  // 輸出編碼

// 1. 參數接收與校驗
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$pageSize = 10;

// 2. 數據庫連接 (建議使用 PDO/Mysqli 預處理)
$conn = mysql_connect("localhost", "root", "7529639");
mysql_select_db("cr_download", $conn);

// 3. 總記錄數查詢 (用於計算總頁數)
$totalResult = mysql_query("SELECT COUNT(*) FROM cr_userinfo");
$total = mysql_fetch_row($totalResult)[0];

// 4. 分頁計算
$pageCount = ceil($total / $pageSize);          // 總頁數
$page = min($pageCount, max(1, $page));         // 邊界修正
$offset = ($page - 1) * $pageSize;              // 偏移量

// 5. 導航鏈接生成
$url = 'test.php';  // 當前頁 URL
$nav = "顯示第 " . ($total ? $offset+1 : 0) . "-" . min($offset+$pageSize, $total) . " 條，共 $total 條 ";

if ($pageCount <= 1) $nav = '';
else {
    $nav .= '首頁 ';
    $nav .= ($page > 1) ? '前頁 ' : '前頁 ';
    $nav .= ($page < $pageCount) ? '後頁 ' : '後頁 ';
    $nav .= '尾頁 ';
    $nav .= " 第 $page / $pageCount 頁";
}

// 6. 異常頁碼攔截
if ($page > $pageCount) { exit("Error: Can Not Found The page $page"); }

// 7. 數據查詢
$dataResult = mysql_query("SELECT * FROM cr_userinfo LIMIT $offset, $pageSize");
while ($row = mysql_fetch_array($dataResult)) {
    echo $row['username'] . "
";
}
echo "
" . $nav;  // 輸出 HTML 片段，直接注入前端 div
?>

前端容器頁面 (index.php)

<html>
<head>
    <title>AJAX 分頁演示</title>
    <script src="ajaxpg.js"></script>
</head>
<body>
    <div id="result">
        <?php include 'test.php'; // 首次加載直接包含後端輸出 ?>
    </div>
</body>
</html>

關鍵技術點深度解析

1. 分頁導航鏈接的 JS 調用模式

點擊不跳轉，調用 dopage() 發起 AJAX
參數 1：目標容器 ID (result)
參數 2：後端 URL 含頁碼參數

2. 後端輸出純 HTML 片段

無需 JSON，直接輸出 <tr>...</tr> + 導航 HTML，前端 innerHTML 直接替換，極簡高效。

3. 編碼一致性

PHP header charset、HTML <meta charset>、JS 文件編碼、數據庫連接字符集 四者必須一致，否則中文亂碼。

4. 安全性增強 (生產必做)

棄用 mysql_*，改用 PDO 預處理語句 防注入
$page 強制 intval，防 XSS
輸出數據 htmlspecialchars() 轉義
添加 CSRF Token 驗證 (針對狀態改變操作)

進階優化方向

Loading 狀態優化：顯示 Spinner、骨架屏、防抖節流
歷史管理：history.pushState 記錄分頁狀態，支持瀏覽器前進後退
滾動加載/虛擬列表：大數據量替代傳統分頁
前端模板引擎：後端返回 JSON，前端渲染 (分離關注點)
緩存策略：首頁/熱門頁緩存 HTML 片段，減輕 DB 壓力

完整文件結構

project/
├── index.php          # 容器頁面，首次包含 test.php
├── test.php           # 後端分頁邏輯 (可重構為獨立 API)
├── ajaxpg.js          # 前端 AJAX 引擎
└── db_config.php      # 數據庫配置 (建議抽離)