JavaWEB快速入门之AJAX实现分页妙招大公开！

前端

2023-12-01 14:42:40

AJAX分页：Java WEB开发必备的指南

在当今快节奏的网络世界中，提供流畅的用户体验至关重要。AJAX分页 是一种强大的技术，可以增强Java WEB应用程序的用户体验，同时提高性能和开发简便性。

AJAX分页：简介

AJAX分页是一种利用AJAX技术（Asynchronous JavaScript and XML）实现的分页方法，无需刷新整个页面即可加载新数据。它通过将数据集分成较小的页面并在用户单击分页链接时异步加载下一页数据来工作。

实现AJAX分页

1. 搭建环境

导入必要的JAR包：
- jackson-annotations-2.2.3.jar
- jackson-core-2.2.3.jar
- jackson-databind-2.2.3.jar
- ojdbc6.jar（用于Oracle数据库）

2. 创建分页方法

public static <T> PageBean<T> getPageBean(PageBean<T> pageBean, Class<T> clazz) {
    Session session = HibernateUtil.getSession();
    Criteria criteria = session.createCriteria(clazz);
    pageBean.setTotalCount(criteria.list().size());
    criteria.setFirstResult((pageBean.getCurrentPage() - 1) * pageBean.getPageSize());
    criteria.setMaxResults(pageBean.getPageSize());
    pageBean.setPageList(criteria.list());
    return pageBean;
}

3. 创建分页Servlet

@WebServlet("/page")
public class PageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int currentPage = Integer.parseInt(req.getParameter("currentPage"));
        int pageSize = Integer.parseInt(req.getParameter("pageSize"));
        PageBean<Student> pageBean = new PageBean<>();
        pageBean.setCurrentPage(currentPage);
        pageBean.setPageSize(pageSize);
        pageBean = getPageBean(pageBean, Student.class);
        String json = JacksonUtil.beanToJson(pageBean);
        resp.getWriter().write(json);
    }
}

4. 创建分页JSP页面

<script>
    $(".page-link").click(function () {
        var currentPage = $(this).attr("data-page");
        var pageSize = $("#pageSize").val();
        $.ajax({
            url: "page",
            type: "GET",
            data: {
                currentPage: currentPage,
                pageSize: pageSize
            },
            success: function (data) {
                var pageBean = JacksonUtil.jsonToBean(data, PageBean);
                $("#table-body").html("");
                for (var i = 0; i < pageBean.pageList.length; i++) {
                    var student = pageBean.pageList[i];
                    $("#table-body").append("<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.age + "</td></tr>");
                }
                $("#currentPage").val(pageBean.currentPage);
                $("#totalPage").val(pageBean.totalPage);
            }
        });
    });
</script>