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

PHP Ajax 無刷新分頁實作教學

編輯：PHP 相關知識

前言

在現代 Web 開發中，無刷新分頁已成為提升使用者體驗的關鍵技術。本文將透過實際程式碼示範，說明如何結合 PHP 與 jQuery Ajax 實現資料的非同步分頁載入，避免傳統分頁每次都需重新整理頁面的缺點。

資料庫結構準備

首先建立一個簡單的訊息資料表，包含自動遞增的主鍵與訊息內容欄位：

CREATE TABLE messages (
    msg_id INT PRIMARY KEY AUTO_INCREMENT,
    message VARCHAR(150)
);

前端 JavaScript 實作

使用 jQuery 處理 Ajax 請求與畫面更新，核心邏輯包含載入動畫顯示/隱藏、資料請求函式、分頁點擊事件綁定：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // 載入動畫控制
    function loading_show() {
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
    }
    function loading_hide() {
        $('#loading').fadeOut();
    }

    // 核心資料載入函式
    function loadData(page) {
        loading_show();
        $.ajax({
            type: "POST",
            url: "load_data.php",
            data: "page=" + page,
            success: function(msg) {
                $("#container").ajaxComplete(function() {
                    loading_hide();
                    $("#container").html(msg);
                });
            }
        });
    }

    // 首次載入預設第一頁
    loadData(1);

    // 分頁連結點擊事件（使用 live 綁定動態產生的元素）
    $('#container .pagination li.active').live('click', function() {
        var page = $(this).attr('p');
        loadData(page);
    });
});
</script>

後端 PHP 處理 (load_data.php)

伺服器端接收頁碼參數，計算資料庫查詢的 LIMIT 範圍，並回傳 HTML 片段：

<?php
if (isset($_POST['page'])) {
    $page = intval($_POST['page']);
    $per_page = 15; // 每頁筆數
    $start = ($page - 1) * $per_page;

    include "db.php"; // 資料庫連線設定

    // 查詢當頁資料
    $query = "SELECT msg_id, message FROM messages LIMIT $start, $per_page";
    $result = mysql_query($query) or die('MySQL Error: ' . mysql_error());

    $msg = "";
    while ($row = mysql_fetch_array($result)) {
        $htmlmsg = htmlentities($row['message']); // 過濾 HTML 實體
        $msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
    }
    $msg = "<div class='data'><ul>" . $msg . "</ul></div>";

    // 計算總頁數
    $count_query = "SELECT COUNT(*) AS count FROM messages";
    $count_result = mysql_query($count_query);
    $row = mysql_fetch_array($count_result);
    $total_records = $row['count'];
    $total_pages = ceil($total_records / $per_page);

    // 此處省略分頁導覽列生成程式碼（可參考完整下載檔案）
    // 輸出資料與分頁 HTML
    echo $msg . $pagination_html;
}
?>