最近我在做一些PHP項目時，發(fā)現(xiàn)使用Ajax實現(xiàn)頁碼功能非常便捷，所以今天我想談?wù)勅绾问褂肞HP Ajax實現(xiàn)頁碼功能。 首先我們來看一個例子，假設(shè)我們有一個商品列表展示頁面，每頁展示10條商品信息。我們需要在頁面中添加一個分頁功能，使用戶可以方便地切換不同頁碼來查看商品信息。這時候就可以使用Ajax來實現(xiàn)這個功能。上面的代碼是前端頁面中的頁碼部分，通過給每個頁碼添加data-page屬性來傳遞頁碼值。 接著，我們需要處理這些頁碼的點擊事件，并發(fā)送Ajax請求獲取對應(yīng)的商品數(shù)據(jù)。為了實現(xiàn)這個功能，我們可以編寫如下的JS代碼：

$('.pagination').on('click', '.page-link', function (e) {
e.preventDefault();
var page = $(this).data('page');  // 獲取頁碼值
$.ajax({
type: 'GET',
url: 'products.php',
data: {page: page},
dataType: 'html',
success: function (data) {
$('.product-list').html(data);  // 將獲取的產(chǎn)品數(shù)據(jù)更新到頁面上
}
});
});

在這個JS代碼中，我們通過獲取頁碼值，并將其通過Ajax請求發(fā)送到PHP后端。PHP后端會根據(jù)接收到的頁碼值，查詢數(shù)據(jù)庫中對應(yīng)的商品數(shù)據(jù)，并返回給前端頁面。 下面是PHP后端的代碼實現(xiàn)：

$pageSize = 10;
$page     = $_GET['page'] ?? 1;
$start    = ($page - 1) * $pageSize;
// 查詢數(shù)據(jù)庫對應(yīng)頁碼的商品數(shù)據(jù)
$sql  = "SELECT * FROM products ORDER BY id ASC LIMIT $start, $pageSize";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 將查詢出來的商品數(shù)據(jù)生成HTML并返回給前端頁面
$productHtml = '';
foreach ($products as $product) {
$productHtml .= '<div class="product">';
$productHtml .= '<img src="'.$product['image'].'" alt="'.$product['name'].'" />';
$productHtml .= '<h4>'.$product['name'].'</h4>';
$productHtml .= '<p>'.$product['description'].'</p>';
$productHtml .= '</div>';
}
echo $productHtml;
// 生成頁碼部分的HTML代碼并返回給前端頁面
$total       = $pdo->query('SELECT COUNT(*) FROM products')->fetchColumn();
$totalPages  = ceil($total / $pageSize);
$paginationHtml = '';
for ($i = 1; $i<= $totalPages; $i++) {
$activeClass = ($page == $i) ? 'active' : '';
$paginationHtml .= '<li class="'.$activeClass.'">';
$paginationHtml .= '<a href="#" class="page-link" data-page="'.$i.'">'.$i.'</a>';
$paginationHtml .= '</li>';
}
echo '<ul class="pagination">'.$paginationHtml.'</ul>';

這里的PHP代碼會查詢數(shù)據(jù)庫中對應(yīng)頁碼的商品數(shù)據(jù)，并將商品數(shù)據(jù)生成HTML代碼返回給前端頁面。除此之外，PHP還會生成頁碼部分的HTML代碼，并將其返回給前端頁面。 通過以上的實現(xiàn)，我們就可以實現(xiàn)商品列表頁面的分頁功能了。下一次當(dāng)用戶在頁面中點擊不同的頁碼時，Ajax就會自動發(fā)送請求到PHP后端，后端會返回對應(yīng)頁碼的商品數(shù)據(jù)，并將其顯示在頁面上。這樣，我們就可以省去頁面跳轉(zhuǎn)等繁瑣的操作，從而提升了整個頁面的用戶體驗。