Ajax是一種在不刷新整個(gè)頁(yè)面的情況下更新部分網(wǎng)頁(yè)內(nèi)容的技術(shù)，通過(guò)異步請(qǐng)求服務(wù)器數(shù)據(jù)，從而實(shí)現(xiàn)無(wú)刷新的頁(yè)面更新。在前端應(yīng)用中，常常需要對(duì)列表進(jìn)行分頁(yè)，而Ajax可以幫助我們實(shí)現(xiàn)這個(gè)功能。

以下是基于jQuery的Ajax實(shí)現(xiàn)分頁(yè)查詢的示例代碼：

HTML代碼：

<div id="result"></div>

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

JS代碼：

var pageSize = 10; // 每頁(yè)顯示的記錄數(shù)

var currentPage = 1; // 當(dāng)前頁(yè)碼

function loadPage(pageNum) {

  $.ajax({

    type: "GET",

    url: "data.php", // 后端接口地址

    data: {

      pageNum: pageNum,

      pageSize: pageSize

    },

    success: function(data) {

      // 處理后端返回的數(shù)據(jù)

      var resultHtml = ""; // 保存查詢結(jié)果的HTML代碼

      // 根據(jù)返回的數(shù)據(jù)生成HTML代碼

      for (var i = 0; i < data.length; i++) {

        resultHtml += "<div>" + data[i].name + "</div>";

      }

      // 顯示查詢結(jié)果

      $("#result").html(resultHtml);

      // 更新分頁(yè)器

      currentPage = pageNum;

      updatePagination(data.totalCount);

    },

    error: function(xhr, status, error) {

      // 處理錯(cuò)誤

    }

  });

}

function updatePagination(totalCount) {

  // 計(jì)算總頁(yè)數(shù)

  var totalPages = Math.ceil(totalCount / pageSize);

  // 生成分頁(yè)器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>";

    }

  }

  // 顯示分頁(yè)器

  $("#pagination").html(paginationHtml);

}

$(function() {

  // 頁(yè)面加載完成后，默認(rèn)加載第一頁(yè)數(shù)據(jù)

  loadPage(1);

});

在上述示例代碼中，我們通過(guò)Ajax異步請(qǐng)求服務(wù)器數(shù)據(jù)，服務(wù)器接口返回的數(shù)據(jù)中包含了總記錄數(shù)和當(dāng)前頁(yè)的數(shù)據(jù)，前端JS代碼根據(jù)這些數(shù)據(jù)生成HTML代碼，更新頁(yè)面顯示和分頁(yè)器。當(dāng)用戶點(diǎn)擊分頁(yè)器時(shí)，調(diào)用loadPage()函數(shù)，重新加載相應(yīng)的數(shù)據(jù)，并更新頁(yè)面顯示和分頁(yè)器。