Ajax实现分页记录 示例代码

Ajax实现分页记录的基本思路是通过异步请求从服务器获取数据，并将数据动态地展示在网页中，以实现分页效果。下面是一个示例代码，演示了如何使用Ajax实现分页记录。

我们需要在网页中创建一个用于展示分页记录的容器，比如一个<div>元素，用于展示数据列表。我们还需要创建一个用于展示分页按钮的容器，比如一个<ul>元素，用于展示分页按钮。

<div id="recordContainer"></div>
<ul id="paginationContainer"></ul>

接下来，我们可以使用JavaScript来实现Ajax请求，并将获取到的数据动态地展示在网页中。

function getRecords(page) {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 监听请求的状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，获取服务器返回的数据
      var response = JSON.parse(xhr.responseText);
      // 将数据展示在网页中
      var recordContainer = document.getElementById("recordContainer");
      recordContainer.innerHTML = "";
      for (var i = 0; i < response.records.length; i++) {
        var record = response.records[i];
        var recordElement = document.createElement("div");
        recordElement.innerHTML = record;
        recordContainer.appendChild(recordElement);
      }
      // 更新分页按钮
      var paginationContainer = document.getElementById("paginationContainer");
      paginationContainer.innerHTML = "";
      for (var j = 1; j <= response.totalPages; j++) {
        var pageButton = document.createElement("li");
        pageButton.innerHTML = j;
        pageButton.onclick = function() {
          getRecords(j);
        };
        paginationContainer.appendChild(pageButton);
      }
    }
  };
  // 发送异步请求
  xhr.open("GET", "/getRecords?page=" + page, true);
  xhr.send();
}
// 初始化页面时获取第一页的记录
getRecords(1);

在上述示例代码中，我们通过XMLHttpRequest对象发送了一个GET请求，请求的URL中包含了当前页数。服务器端根据请求的页数返回对应的数据，并将数据以JSON格式返回给客户端。客户端接收到服务器返回的数据后，将数据动态地展示在网页中，并更新分页按钮。当用户点击分页按钮时，会再次调用getRecords函数，传入对应的页数，从而获取对应页数的记录。

通过以上的代码示例，我们可以实现一个基本的Ajax分页记录功能。