java ajax实现分页_示例代码

Java Ajax实现分页的示例代码如下：

我们需要在前端页面中定义一个分页的区域，通常是一个包含页码的div元素。在这个示例中，我们使用id为"pagination"的div元素来展示分页信息。

<div id="pagination">
    <!-- 分页内容将在这里动态生成 -->
</div>

接下来，我们需要编写一个JavaScript函数来处理分页的逻辑。该函数将使用Ajax来异步加载分页数据，并将数据展示在页面上。

function loadPage(pageNumber) {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 设置回调函数，处理服务器响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 从服务器获取到的分页数据
            var data = JSON.parse(xhr.responseText);
            // 清空分页区域
            var paginationDiv = document.getElementById("pagination");
            paginationDiv.innerHTML = "";
            // 根据分页数据生成页码
            for (var i = 1; i <= data.totalPages; i++) {
                var pageLink = document.createElement("a");
                pageLink.href = "javascript:void(0);";
                pageLink.innerHTML = i;
                pageLink.onclick = function() {
                    // 点击页码时重新加载对应的分页数据
                    loadPage(this.innerHTML);
                };
                // 高亮当前页码
                if (i == pageNumber) {
                    pageLink.className = "active";
                }
                // 将页码添加到分页区域
                paginationDiv.appendChild(pageLink);
            }
        }
    };
    // 发送Ajax请求，获取分页数据
    xhr.open("GET", "/api/page?page=" + pageNumber, true);
    xhr.send();
}

在这段示例代码中，我们定义了一个名为"loadPage"的函数，它接受一个参数"pageNumber"，表示要加载的页码。该函数使用XMLHttpRequest对象发送GET请求到服务器的"/api/page"接口，并将页码作为参数传递给服务器。服务器返回的分页数据是一个JSON字符串，我们使用JSON.parse方法将其转换为JavaScript对象。

在回调函数中，我们首先清空分页区域，然后根据分页数据生成相应的页码。对于每个页码，我们创建一个a标签，并设置其href属性为"javascript:void(0);"，这样点击页码时不会跳转到其他页面。我们为每个页码添加一个点击事件处理函数，当点击页码时重新加载对应的分页数据。

我们将生成的页码添加到分页区域中，并根据当前页码添加一个"active"类名，以便在样式中进行高亮显示。

通过调用loadPage函数，并传入初始的页码，我们可以在页面加载时加载第一页的分页数据。随后，当用户点击页码时，会触发loadPage函数重新加载对应的分页数据，并在页面上展示。