AJAX（Asynchronous JavaScript and XML）是一種用于創建快速響應的動態網頁的技術。通過AJAX，可以在不刷新整個頁面的情況下，向服務器發送請求并接收到部分數據，從而實現局部刷新。其中，實現分頁查詢數據是AJAX中常見的應用之一。本文將介紹如何使用AJAX來實現分頁查詢數據，并結合具體的示例進行說明。

假設我們有一個商品列表頁面，需要實現分頁展示商品數據。在點擊分頁頁碼時，通過AJAX向服務器發送請求，獲取對應頁碼的商品數據，并將其展示在頁面上。首先，我們需要在HTML文件中創建一個可以顯示商品列表的容器，以及一個按鈕區域用于切換分頁。

<div id="productList"></div>
<div id="pagination"></div>

在服務器端，我們需要提供一個API，用于處理分頁查詢請求。該API接收一個參數表示頁碼，并返回對應頁碼的商品數據。例如，我們可以使用Node.js和Express來創建一個簡單的API。

const express = require('express');
const app = express();
app.get('/api/products', (req, res) =>{
const page = req.query.page;
// 根據頁碼查詢商品數據
const products = queryProductsByPage(page);
res.json(products);
});
app.listen(3000, () =>{
console.log('API server is running on port 3000');
});

在前端代碼中，我們通過AJAX來與服務器進行交互。在點擊分頁按鈕時，我們通過AJAX發送GET請求到后端API，并將頁碼作為參數進行傳遞。服務器返回的商品數據將通過AJAX回調函數進行處理，并將其展示到頁面上。以下是一個使用jQuery來實現AJAX分頁的示例：

function fetchProducts(page) {
$.ajax({
url: '/api/products',
type: 'GET',
data: { page: page },
success: function(data) {
if (data.length >0) {
// 清空商品列表容器
$('#productList').empty();
// 遍歷商品數據，將其添加到商品列表容器中
data.forEach(function(product) {
$('#productList').append('<div>' + product.name + '</div>');
});
}
}
});
}
// 初始化頁面，默認加載第一頁的商品數據
fetchProducts(1);
// 點擊分頁按鈕時，加載對應頁碼的商品數據
$('#pagination').on('click', 'button', function() {
const page = $(this).data('page');
fetchProducts(page);
});

在上述示例中，我們使用了jQuery的`$.ajax`方法來發送AJAX請求。`fetchProducts`函數接收一個參數表示頁碼，然后通過`$.ajax`發送GET請求到`/api/products`路由，并將頁碼作為查詢參數傳遞。服務器返回的商品數據將通過AJAX的回調函數進行處理，并將其展示到商品列表容器中。

通過以上的示例，我們成功地使用AJAX來實現了分頁查詢數據的功能。通過點擊分頁按鈕，我們可以動態地加載對應頁碼的商品數據，從而實現了更加流暢的用戶體驗。同時，使用AJAX可以減少對服務器的壓力，提高網頁的加載速度。希望本文能夠幫助讀者更好地理解和應用AJAX中的分頁查詢功能。