PHP + AJAX 無刷新分頁完整實現：原生 JS 與後端協作詳解

AJAX 分頁透過非同步請求局部更新內容，提升用戶體驗。本文提供原生 JavaScript 實現（無框架依賴）與 PHP 後端協作的完整方案。

架構圖解

[瀏覽器] --AJAX GET page=N--> [PHP 後端] --JSON/HTML 片段--> [瀏覽器] --DOM 更新--> [用戶見到新頁]

前端核心：ajaxpg.js

const AjaxPager = {
    xhr: null,
    container: null,
    
    init(containerId) {
        this.container = document.getElementById(containerId);
        this.bindEvents();
    },
    
    bindEvents() {
        // 事件代理：分頁鏈接點擊
        this.container.addEventListener('click', e => {
            const link = e.target.closest('a.page-link');
            if (link) {
                e.preventDefault();
                this.load(link.href);
            }
        });
    },
    
    load(url) {
        this.showLoading();
        
        this.xhr = new XMLHttpRequest();
        this.xhr.open('GET', url, true);
        this.xhr.onload = () => {
            if (this.xhr.status === 200) {
                this.container.innerHTML = this.xhr.responseText;
                this.bindEvents(); // 重新綁定新內容的事件
            } else {
                this.showError('請求失敗：' + this.xhr.status);
            }
        };
        this.xhr.onerror = () => this.showError('網路錯誤');
        this.xhr.send();
    },
    
    showLoading() {
        this.container.innerHTML = '
載入中...
';
    },
    
    showError(msg) {
        this.container.innerHTML = `
${msg}
`;
    }
};

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    AjaxPager.init('result');
});

後端 PHP：邏輯與輸出分離

// config.php
const PAGE_SIZE = 10;

// api/page.php（AJAX 端點）
header('Content-Type: text/html; charset=utf-8');

$page = max(1, intval($_GET['page'] ?? 1));
$pdo = new PDO('mysql:host=localhost;dbname=demo', 'root', '');

$total = $pdo->query('SELECT COUNT(*) FROM users')->fetchColumn();
$pageCount = ceil($total / PAGE_SIZE);
$page = min($page, max(1, $pageCount));

$offset = ($page - 1) * PAGE_SIZE;
$stmt = $pdo->prepare('SELECT * FROM users ORDER BY id DESC LIMIT ?, ?');
$stmt->bindValue(1, $offset, PDO::PARAM_INT);
$stmt->bindValue(2, PAGE_SIZE, PDO::PARAM_INT);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 輸出 HTML 片段（含分頁導航）
require 'templates/page_fragment.php';

模板片段：templates/page_fragment.php

    
ID
用戶名
郵箱
    

    
        

            

            

            

        
    
    

首頁整合：index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX 分頁演示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="result">
        <?php require 'api/page.php'; ?>
    </div>
    <script src="ajaxpg.js"></script>
</body>
</html>

進階優化方向

• History API：history.pushState() 同步 URL，支援瀏覽器前進後退
• JSON 格式：後端回傳 JSON，前端渲染模板（配合 Vue/React/原生 template）
• 防抖/節流：快速點擊時合併請求
• 快取策略：前端 IndexedDB 快取已訪問頁
• 無限滾動：IntersectionObserver 替換分頁鏈接

SEO 與無障礙注意

• 首屏內容需 SSR 直出，供搜尋引擎抓取
• 分頁鏈接保留 href 實際 URL，支援無 JS 環境
• 加載狀態提供 aria-live="polite" 通知螢幕閱讀器

此方案零框架依賴，適合輕量專案或學習 AJAX 核心機制。生產環境建議引入成熟前端框架處理狀態管理與渲染。