ajax请求数据分页【示例代码】

Ajax请求数据分页是一种常见的网页技术，它可以实现在不刷新整个页面的情况下，通过异步请求服务器数据来实现分页功能。这样可以提高用户体验，减少服务器负载。

我们需要在页面中创建一个用于展示数据的容器，比如一个div元素。然后，我们可以使用JavaScript中的XMLHttpRequest对象来发送异步请求。在请求中，我们需要指定请求的URL、请求的类型（GET或POST）以及是否异步（true或false）。

接下来，我们可以在请求的回调函数中处理服务器返回的数据。通常，服务器会返回一个JSON格式的数据，其中包含了当前页的数据以及分页相关的信息，比如总页数、当前页码等。我们可以解析这个JSON数据，并根据其中的信息来更新页面中的数据和分页导航。

下面是一个示例代码，实现了通过Ajax请求数据分页的功能：

// HTML部分
<div id="data-container"></div>
// JavaScript部分
function loadData(page) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data?page=' + page, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      var data = response.data;
      var totalPages = response.totalPages;
      // 更新数据容器中的内容
      var container = document.getElementById('data-container');
      container.innerHTML = '';
      for (var i = 0; i < data.length; i++) {
        var item = document.createElement('div');
        item.textContent = data[i];
        container.appendChild(item);
      }
      // 更新分页导航
      var pagination = document.getElementById('pagination');
      pagination.innerHTML = '';
      for (var i = 1; i <= totalPages; i++) {
        var pageLink = document.createElement('a');
        pageLink.textContent = i;
        pageLink.href = 'javascript:void(0)';
        pageLink.onclick = function() {
          loadData(i);
        };
        pagination.appendChild(pageLink);
      }
    }
  };
  xhr.send();
}
// 初始化加载第一页的数据
loadData(1);

在上面的示例代码中，我们通过XMLHttpRequest对象发送了一个GET请求，请求的URL为`/api/data`，并传递了一个`page`参数来指定请求的页码。在请求的回调函数中，我们解析了服务器返回的JSON数据，并根据其中的数据来更新页面中的数据容器和分页导航。我们通过调用`loadData(1)`来初始化加载第一页的数据。

通过这样的方式，我们可以实现一个简单的Ajax请求数据分页的功能。当用户点击分页导航时，会发送异步请求到服务器，获取对应页码的数据，并将其更新到页面中，从而实现无刷新的分页效果。