jquery servlet html实现后端分页功能的实现：使用jQuery、Servlet和HTML实现后端分页功能

来源：网络作者：日期：2025-11-11 06:32:32

背景与需求分析

在实际开发中,当数据量较大时，前端一次性加载所有数据会导致页面加载缓慢、用户体验差，甚至可能因数据量过大而崩溃，后端分页成为更优的选择，后端分页通过每次只返回当前页的数据，减少前端压力，提升响应速度。

实现步骤

前端部分（HTML + jQuery）

前端负责发送分页请求,并展示返回的数据，以下是一个简单的分页导航栏示例：

<!DOCTYPE html>
<html>
<head>后端分页示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="data-container"></div>
    <div id="pagination"></div>
    <script>
        $(document).ready(function() {
            // 当前页码
            let currentPage = 1;
            // 每页显示数量
            const pageSize = 10;
            // 加载数据
            function loadData(page) {
                currentPage = page;
                $.ajax({
                    url: 'PageServlet',
                    type: 'GET',
                    data: {
                        page: page,
                        limit: pageSize
                    },
                    success: function(response) {
                        // 假设返回的数据格式为 { data: [...], total: 100 }
                        const data = response.data;
                        const totalItems = response.total;
                        renderData(data);
                        renderPagination(totalItems);
                    }
                });
            }
            // 渲染数据
            function renderData(data) {
                const container = $('#data-container');
                container.empty();
                data.forEach(item => {
                    container.append(`<p>${item.id} - ${item.name}</p>`);
                });
            }
            // 渲染分页
            function renderPagination(totalItems) {
                const totalPages = Math.ceil(totalItems / pageSize);
                const pagination = $('#pagination');
                pagination.empty();
                // 上一页按钮
                if (currentPage > 1) {
                    pagination.append('<button onclick="loadData(' + (currentPage - 1) + ')" class="prev-btn">上一页</button>');
                }
                // 页码按钮
                for (let i = 1; i <= totalPages; i++) {
                    if (i === currentPage) {
                        pagination.append('<button class="active" onclick="loadData(' + i + ')">' + i + '</button>');
                    } else {
                        pagination.append('<button onclick="loadData(' + i + ')">' + i + '</button>');
                    }
                }
                // 下一页按钮
                if (currentPage < totalPages) {
                    pagination.append('<button onclick="loadData(' + (currentPage + 1) + ')" class="next-btn">下一页</button>');
                }
            }
            // 初始加载第一页
            loadData(1);
        });
    </script>
</body>
</html>

后端部分（Servlet）

Servlet负责处理前端的分页请求,从数据库中获取对应页的数据，并返回给前端。

import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/PageServlet")
public class PageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应格式为JSON
        response.setContentType("application/json;charset=UTF-8");
        // 获取参数
        int page = Integer.parseInt(request.getParameter("page"));
        int limit = Integer.parseInt(request.getParameter("limit"));
        // 数据库查询（假设有一个UserService类）
        List<Item> data = ItemService.getItems(page, limit);
        long total = ItemService.getItemTotal();
        // 构建返回数据
        Map<String, Object> result = new HashMap<>();
        result.put("data", data);
        result.put("total", total);
        // 返回JSON数据
        new ObjectMapper().writeValue(response.getOutputStream(), result);
    }
}