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

jQuery + PHP + AJAX 實現微博式「加載更多」無限滾動列表功能

編輯：PHP 相關知識

前言

在現代社交平台（如微博、Twitter、Facebook）中，傳統的分頁導航已逐漸被「無限滾動」或「點擊加載更多」的交互模式所取代。這種方式能讓用戶在不離開當前頁面的情況下，流暢地瀏覽更多內容，極大地提升了用戶體驗。本文將詳細介紹如何結合 jQuery、PHP 與 AJAX 技術，實現一個高效的「加載更多」內容列表功能。

核心原理：AJAX 分頁加載

該功能的核心流程如下：

頁面初始化時，jQuery 向後端發送請求，獲取首批數據。
PHP 從數據庫查詢最新記錄，以 JSON 格式返回前端。
列表底部放置「查看更多」按鈕（或監聽滾動事件）。
用戶觸發加載動作，前端傳遞當前已加載的記錄數（last）與單次加載數量（amount）給後端。
PHP 根據參數執行 LIMIT 查詢，返回下一批數據。
前端解析 JSON，將新數據追加至列表末尾。

本質上，這是一種基於 AJAX 的分頁技術，避免了整頁刷新。

前端準備：引入依賴庫

首先需要引入 jQuery 核心庫以及封裝好加載邏輯的 jquery.more.js 插件：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>

HTML 結構佈局

列表容器與單條記錄的結構需與插件約定的 Class 名稱對應：

<div id="more">
  <div class="single_item">
    <div class="element_head">
      <div class="date"></div>
      <div class="author"></div>
    </div>
    <div class="content"></div>
  </div>
  <a href="javascript:;" class="get_more">點擊加載更多內容</a>
</div>

注意： single_item 為單條數據模板，get_more 為觸發加載的按鈕。若自定義 Class 名，需在插件配置中同步修改。

CSS 樣式美化

以下為示例樣式，包含列表容器、項目分隔、作者/日期定位、加載動畫等：

#more { margin: 10px auto; width: 560px; border: 1px solid #999; }
.single_item { padding: 20px; border-bottom: 1px dotted #d3d3d3; }
.author { position: absolute; left: 0px; font-weight: bold; color: #39f; }
.date { position: absolute; right: 0px; color: #999; }
.content { line-height: 20px; word-break: break-all; }
.element_head { width: 100%; position: relative; height: 20px; }
.get_more { margin: 10px; text-align: center; }
.more_loader_spinner { width: 20px; height: 20px; margin: 10px auto; background: url(loader.gif) no-repeat; }

.more_loader_spinner 用於顯示加載中的旋轉動畫，提升用戶等待時的感知體驗。

jQuery 初始化配置

插件調用極其簡潔，核心在於指定後端數據接口地址：

$(function() {
  $('#more').more({
    'address': 'data.php'
  });
});

後端 PHP 數據接口 (data.php)

後端負責接收參數、查詢數據庫、輸出 JSON：

<?php
require_once('connect.php'); // 數據庫連接配置

$last = $_POST['last'];     // 起始記錄位置
$amount = $_POST['amount']; // 單次加載條數

// 模擬用戶名映射
$user = array('demo1','demo2','demo3','demo3','demo4');

// 查詢語句：按 ID 降序分頁
$query = mysql_query("SELECT * FROM say ORDER BY id DESC LIMIT $last, $amount");

$sayList = array();
while ($row = mysql_fetch_array($query)) {
    $sayList[] = array(
        'content' => $row['content'],
        'author' => $user[$row['userid']],
        'date' => date('m-d H:i', $row['addtime'])
    );
}

// 輸出 JSON
echo json_encode($sayList);
?>

關鍵點： SQL 中的 LIMIT $last, $amount 實現了分頁邏輯。返回的 JSON 數組將被前端插件自動渲染至 .single_item 模板中。

插件核心參數詳解

jquery.more.js 提供豐富的配置選項，滿足不同場景需求：

'amount'     : '10',        // 每次加載記錄數
'address'    : 'comments.php', // 請求後台地址
'format'     : 'json',      // 數據傳輸格式
'template'   : '.single_item', // HTML 記錄容器 Class
'trigger'    : '.get_more', // 觸發加載元素 Class
'scroll'     : 'false',     // 是否啟用滾動自動加載
'offset'     : '100'        // 滾動觸發的偏移量(像素)

設定 scroll: 'true' 可實現「下拉到底自動加載」的無限滾動效果。
offset 定義距離底部多少像素時預加載，防止白屏等待。