PHP AJAX 加載更多

在網頁開發中，經常會遇到需要加載大量數據的情況，如果一次性全部加載出來，可能會對網頁性能造成影響，因此我們需要使用一些技術手段來解決這個問題。其中，常用的技術之一就是 AJAX 技術，它可以通過異步加載數據的方式，使網頁更加高效。

下面我們來看一下如何使用 PHP AJAX 加載更多功能。假設我們有一個 blog 網站，頁面中展示了最新的 10 篇文章，并且底部有一個“加載更多”的按鈕，點擊按鈕可以加載前 10 篇文章。當用戶不斷點擊“加載更多”按鈕時，可以一次一次地追加文章，一直到所有的文章都被加載出來為止。

實現思路

實現這個功能的思路非常簡單：當用戶點擊“加載更多”按鈕時，向服務器發起 AJAX 請求，獲取需要加載的文章，然后將獲取到的數據追加到頁面中。因此，我們只需要實現以下幾個步驟：

1. 頁面中添加“加載更多”按鈕；
2. 編寫 AJAX 請求；
3. 后臺處理 AJAX 請求；
4. 將請求到的數據追加到頁面中。

頁面修改

首先，在頁面底部添加一個“加載更多”按鈕，點擊按鈕時觸發 AJAX 請求，代碼如下：

<button id="load-more">加載更多</button>
<script>
$(document).ready(function() {
$(document).on('click', '#load-more', function() {
// 觸發 AJAX 請求
});
});
</script>

AJAX 請求

在點擊“加載更多”按鈕時，我們需要發起 AJAX 請求，向服務器請求需要加載的文章。代碼如下：

$(document).ready(function() {
$(document).on('click', '#load-more', function() {
$.ajax({
url: 'backend.php', // 后臺處理 AJAX 請求的 PHP 文件
type: 'POST', // 請求方式為 POST
data: { // 請求數據
offset: 10 // 如果已經加載了 10 篇文章，下一次請求的 offset 為 10
},
success: function(response) { // 成功回調函數
// 處理請求到的數據
},
error: function(xhr, status, error) { // 失敗回調函數
console.error(error);
}
});
});
});

后臺處理

在后臺處理 AJAX 請求的 PHP 文件中，我們需要先獲取請求數據中的 offset，然后根據 offset 值來獲取數據庫中需要加載的文章。在獲取到文章后，我們需要將文章以 JSON 格式返回給前端頁面。后臺處理代碼如下：

$offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
// 獲取需要加載的文章
$sql = "SELECT * FROM articles ORDER BY id DESC LIMIT {$offset}, 10";
$result = mysqli_query($conn, $sql);
$articles = array(); // 存放獲取到的文章列表
while ($row = mysqli_fetch_assoc($result)) {
$articles[] = $row;
}
// 將獲取到的文章以 JSON 格式返回給前端頁面
header('Content-Type: application/json');
echo json_encode($articles);

數據追加

當后臺返回文章數據后，前端頁面需要將這些文章數據追加到已加載文章的末尾，從而實現“無限滾動”的效果。代碼如下：

$(document).ready(function() {
$(document).on('click', '#load-more', function() {
$.ajax({
url: 'backend.php', // 后臺處理 AJAX 請求的 PHP 文件
type: 'POST', // 請求方式為 POST
data: { // 請求數據
offset: 10 // 如果已經加載了 10 篇文章，下一次請求的 offset 為 10
},
success: function(response) { // 成功回調函數
for (var i = 0; i < response.length; i++) {
// 將獲取到的文章追加到已經加載文章的末尾
var article = <<<EOT
<div class="article">
<h1>{$response[i].title}</h1>
<p>{$response[i].content}</p>
</div>
EOT;
$('#article-list').append(article);
}
},
error: function(xhr, status, error) { // 失敗回調函數
console.error(error);
}
});
});
});

總結

通過上述步驟，我們就可以實現 PHP AJAX 加載更多的功能。當用戶點擊“加載更多”按鈕時，前端頁面會向后臺發送 AJAX 請求，后臺會根據請求的 offset 值，獲取數據庫中需要加載的文章，然后將這些文章以 JSON 格式返回給前端頁面。當前端頁面接收到返回的數據后，會將這些文章數據追加到已加載文章的末尾，從而實現“無限滾動”的效果。