前端 Ajax 代码如何读取数据并分页显示

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，可以与服务器交换数据并更新部分网页的技术。前端使用Ajax读取数据并分页显示需要经历请求发送、数据处理、页面渲染 等步骤。在详细描述中，我们将重点讨论数据的异步获取和分页逻辑实现。

首先，前端代码通过发送Ajax请求到服务端API接口，获取到数据后，前端JavaScript将这些数据渲染至页面上。而分页显示则需要额外的分页逻辑。这包括计算分页信息以及处理分页交互，如处理用户点击“下一页”或“上一页”时的事件。具体到分页逻辑的实现，通常是通过维护一个当前页码的状态，并在用户进行分页操作时更新这个状态，然后根据更新后的状态重新向服务器发送请求获取相应页的数据，最后将这部分数据渲染到页面中。

一、AJAX请求的基础知识

在实现分页之前，必须能够通过Ajax请求从服务器拉取数据。 使用最原始的XMLHttpRequest对象或者现代的Fetch API皆可。我们普遍利用JavaScript中的XMLHttpRequest对象发送HTTP请求，该技术实现对数据的异步加载。

XMLHttpRequest的使用

创建一个XMLHttpRequest对象后，可以设定请求类型（GET或POST），请求的URL（API接口地址），以及是否异步执行。然后通过监听对象的readystatechange事件来处理响应：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            var responseData = JSON.parse(xhr.responseText);
            // 处理数据逻辑
        } else {
            console.error('请求失败');
        }
    }
};
xhr.open('GET', '服务器API地址', true);
xhr.send();

Fetch API

在现代浏览器中，Fetch API 提供了一个更为简单和强大的网络请求接口。它基于Promise，更为优雅地处理异步请求。

fetch('服务器API地址')
    .then(response => response.json())
    .then(data => {
        // 处理数据逻辑
    })
    .catch(error => console.error('请求失败', error));

二、服务器端分页的实现

服务器端逻辑需要处理客户端的分页请求，并返回相应范围的数据。 服务端通常接收两个参数：pageIndex和pageSize。pageIndex代表请求的当前页数，pageSize代表每页的数据条数。

分页参数处理

服务器根据传入的pageIndex和pageSize参数计算需要返回的数据偏移量以及数据量。例如，在SQL查询中，这通常通过LIMIT和OFFSET子句来实现：

SELECT * FROM table_name LIMIT pageSize OFFSET (pageIndex - 1) * pageSize;

返回分页数据

服务端应该将数据以及关于数据的分页信息，如总页数、总记录数等，以JSON格式的响应体返回给客户端，这样客户端才能根据这些信息进行相应的分页渲染。

三、前端分页逻辑实现

获取到数据后，前端页面需要根据服务器返回的分页信息来渲染分页控件。 分页控件包括“上一页”、“下一页”、当前页码显示以及直接跳转到某页的输入功能。

分页控件构建

通常，分页控件是由一系列的链接或按钮组成，用户通过点击这些链接或按钮来触发分页事件。

// 以简单的Bootstrap分页控件为例
var paginationHtml = '<nav aria-label="Page navigation"><ul class="pagination">';
// 根据分页信息动态添加分页按钮
// ...
paginationHtml += '</ul></nav>';

分页事件处理

对于每一个分页按钮，都要添加事件监听器。当用户点击按钮时，更新当前页码然后重新发送Ajax请求。

document.querySelector('.pagination').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName === 'A') {
        // 获取点击按钮的页码
        var newPage = parseInt(target.getAttribute('data-page'), 10);
        requestData(newPage);
    }
});

四、数据渲染与更新

当页面收到新的数据时，前端JavaScript需要处理DOM操作，更新页面内容。 这个过程称作数据绑定。通常涉及两个方面：清空原有内容和渲染新内容。

清空原有内容

在新的数据到来之前，需要将原有的元素内容清空，为新的数据渲染腾出空间。

var dataContAIner = document.getElementById('data-container');
dataContainer.innerHTML = ''; // 清空容器中的内容

渲染新内容

遍历新的数据，动态创建元素，并添加到页面容器中。

data.forEach(item => {
    var element = document.createElement('div');
    // 根据数据设置元素内容
    // ...
    dataContainer.appendChild(element);
});

综上所述，Ajax在前端页面中读取数据并分页显示其过程中，核心的几个步骤是请求发送、数据处理和页面分页逻辑的构建。大多数前端应用框架或库（如React、Vue、Angular）都提供了更加高级和自动化的工具来简化这个过程。通过使用Ajax，我们可以创建更加动态和用户友好的网页应用，提升用户体验。