Java培训机构:ajax如何实现分页查询

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()函数，重新加载相应的数据，并更新页面显示和分页器。