要在PHP中使用Ajax實現分頁加載，可以按照以下步驟操作：
data.php的PHP文件，用于獲取數據并進行分頁處理。在這個文件中，你需要連接到數據庫并查詢所需的數據。為了簡化示例，我們假設你使用的是MySQL數據庫。<?php
// 連接數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 獲取請求參數
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$limit = 10; // 每頁顯示的數據條數
// 計算查詢的起始位置
$start = ($page - 1) * $limit;
// 查詢數據
$sql = "SELECT id, name, age FROM myTable LIMIT $start, $limit";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
} else {
echo "0 結果";
}
// 返回JSON格式的數據
echo json_encode($data);
$conn->close();
?>
index.php的HTML文件，用于顯示數據和分頁按鈕。在這個文件中，我們將使用Ajax從data.php獲取數據，并在頁面上顯示。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分頁加載示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="data-container">
<!-- 數據將在這里顯示 -->
</div>
<div id="pagination">
<!-- 分頁按鈕將在這里顯示 -->
</div>
<script>
let currentPage = 1;
let totalPages = 0;
// 獲取數據并顯示
function loadData() {
$.ajax({
url: 'data.php',
type: 'GET',
dataType: 'json',
data: { page: currentPage },
success: function(response) {
if (response.length === 0) {
alert('沒有更多數據了');
return;
}
displayData(response);
updatePagination(response.length, totalPages);
},
error: function() {
alert('獲取數據失敗');
}
});
}
// 顯示數據
function displayData(data) {
let html = '';
data.forEach(function(item) {
html += '<div>' + item.id + ' - ' + item.name + ' - ' + item.age + '</div>';
});
$('#data-container').html(html);
}
// 更新分頁按鈕
function updatePagination(totalItems, totalPages) {
if (totalPages === 0) {
totalPages = 1;
}
let html = '';
for (let i = 1; i <= totalPages; i++) {
html += '<button onclick="changePage(' + i + ')">' + i + '</button>';
}
$('#pagination').html(html);
}
// 改變當前頁
function changePage(page) {
if (page > 0 && page <= totalPages) {
currentPage = page;
loadData();
} else {
alert('無效的頁碼');
}
}
// 初始化
$(document).ready(function() {
loadData();
totalPages = Math.ceil(100 / 10); // 假設總共有100條數據
});
</script>
</body>
</html>
現在，當你打開index.php并點擊分頁按鈕時，頁面將使用Ajax從data.php獲取數據并顯示。請注意，這個示例僅用于演示目的，實際應用中可能需要根據需求進行調整。
