更新時間:2024-04-21 14:01:39 來源:動力節點 瀏覽550次
Ajax是一種在不刷新整個頁面的情況下更新部分網頁內容的技術,通過異步請求服務器數據,從而實現無刷新的頁面更新。在前端應用中,常常需要對列表進行分頁,而Ajax可以幫助我們實現這個功能。
以下是基于jQuery的Ajax實現分頁查詢的示例代碼:
HTML代碼:
<div id="result"></div>
<div id="pagination"></div>
JS代碼:
var pageSize = 10; // 每頁顯示的記錄數
var currentPage = 1; // 當前頁碼
function loadPage(pageNum) {
$.ajax({
type: "GET",
url: "data.php", // 后端接口地址
data: {
pageNum: pageNum,
pageSize: pageSize
},
success: function(data) {
// 處理后端返回的數據
var resultHtml = ""; // 保存查詢結果的HTML代碼
// 根據返回的數據生成HTML代碼
for (var i = 0; i < data.length; i++) {
resultHtml += "<div>" + data[i].name + "</div>";
}
// 顯示查詢結果
$("#result").html(resultHtml);
// 更新分頁器
currentPage = pageNum;
updatePagination(data.totalCount);
},
error: function(xhr, status, error) {
// 處理錯誤
}
});
}
function updatePagination(totalCount) {
// 計算總頁數
var totalPages = Math.ceil(totalCount / pageSize);
// 生成分頁器HTML代碼
var paginationHtml = "";
for (var i = 1; i <= totalPages; i++) {
if (i === currentPage) {
paginationHtml += "<span>" + i + "</span>";
} else {
paginationHtml += "<a href='javascript:loadPage(" + i + ")'>" + i + "</a>";
}
}
// 顯示分頁器
$("#pagination").html(paginationHtml);
}
$(function() {
// 頁面加載完成后,默認加載第一頁數據
loadPage(1);
});
在上述示例代碼中,我們通過Ajax異步請求服務器數據,服務器接口返回的數據中包含了總記錄數和當前頁的數據,前端JS代碼根據這些數據生成HTML代碼,更新頁面顯示和分頁器。當用戶點擊分頁器時,調用loadPage()函數,重新加載相應的數據,并更新頁面顯示和分頁器。
相關閱讀
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習