js 无刷新分页

基础概念：无刷新分页是指在不重新加载整个页面的情况下，通过 JavaScript 及相关技术（如 AJAX）实现页面数据的动态更新和分页显示。

优势：

提升用户体验，减少页面加载的等待时间，使操作更加流畅。
减少服务器的负担，因为不需要每次都返回整个页面的数据。

类型：

基于 DOM 操作的无刷新分页：通过修改页面中现有的 DOM 元素来显示新的分页数据。
基于 AJAX 的无刷新分页：向服务器发送异步请求获取新的分页数据，然后更新页面。

应用场景：

数据量较大的列表展示，如新闻列表、商品列表等。
实时性要求较高的数据展示页面。

可能出现的问题及原因：

分页数据加载缓慢：可能是服务器响应时间过长，或者网络状况不佳。
分页数据不准确：可能是数据获取的逻辑有误，或者服务器端分页处理错误。

解决方法：

优化服务器端的查询和处理逻辑，提高响应速度。
- 对数据库查询进行优化，添加合适的索引。
- 使用缓存机制减少重复计算和数据获取。

检查网络请求是否正确，确保发送的参数准确无误。
对获取到的数据进行正确的处理和渲染，保证分页逻辑的正确性。

以下是一个简单的基于 AJAX 的无刷新分页示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无刷新分页示例</title>
</head>

<body>
  <div id="data-container"></div>
  <button id="prev-page">上一页</button>
  <button id="next-page">下一页</button>

  <script>
    let currentPage = 1;
    const pageSize = 5;

    function loadData(page) {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `your-data-endpoint?page=${page}&size=${pageSize}`);
      xhr.onload = function () {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          renderData(data);
        }
      };
      xhr.send();
    }

    function renderData(data) {
      const container = document.getElementById('data-container');
      container.innerHTML = '';
      data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item;
        container.appendChild(div);
      });
    }

    document.getElementById('prev-page').addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        loadData(currentPage);
      }
    });

    document.getElementById('next-page').addEventListener('click', () => {
      currentPage++;
      loadData(currentPage);
    });

    // 初始加载第一页数据
    loadData(currentPage);
  </script>
</body>

</html>

在上述示例中，需要将 your-data-endpoint 替换为实际获取数据的服务端接口地址。