ajax练习（分页查询）

最新推荐文章于 2022-04-01 13:54:21 发布

严格要求自己

最新推荐文章于 2022-04-01 13:54:21 发布

阅读量403

点赞数

分类专栏： java web练习文章标签： bootstrap jquery ajax jsp hibernate

本文链接：https://blog.csdn.net/qq_43050847/article/details/107192956

版权

java web练习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

jsp页面（每个请求都需带上完整参数）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分页练习</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <style>
        #dataText {
            text-align: right;
            font-family: 微软雅黑;
            margin-top: 10px;
        }

        #dataNum {
            text-align: left;
        }
    </style>
    <script>
        $(function () {
            var pageSize;
            var page;
            var totalPage;

            // 页面加载完成后执行
            showTd({"page": 1, "pageSize": 5});

            // 点击下一页
            $("#nextPage").click(function () {
                showTd({
                    "page": page + 1,
                    "pageSize": pageSize,
                    "stuName": $("#stuName").val(),
                    "stuAdd": $("#stuAdd").val()
                });
            });
            // 点击上一页
            $("#prevPage").click(function () {
                showTd({
                    "page": page - 1,
                    "pageSize": pageSize,
                    "stuName": $("#stuName").val(),
                    "stuAdd": $("#stuAdd").val()
                });
            });
            // 带参数查询
            $("#queryBtn").click(function () {
                showTd({
                    "page": 1,
                    "pageSize": pageSize,
                    "stuName": $("#stuName").val(),
                    "stuAdd": $("#stuAdd").val()
                });
            });
            // 改变每页显示长度
            $("#dataNum").change(function () {
                pageSize = $("#dataNum").val();
                showTd({
                    "page": page,
                    "pageSize": pageSize,
                    "stuName": $("#stuName").val(),
                    "stuAdd": $("#stuAdd").val()
                });
            });

            function showTd(param) {
                $.post("${pageContext.request.contextPath}/page", param, function (data) {
                    if (data.returnCode == 200) {
                        $("#showTable").html("");
                        $.each(data.returnData, function (i, d) {
                            $("#showTable").append("<tr>" +
                                "            <td>" + d.stuName + "</td>" +
                                "            <td>" + d.stuSex + "</td>" +
                                "            <td>" + d.stuAge + "</td>" +
                                "            <td>" + d.stuAdd + "</td>" +
                                "        </tr>");
                        })
                    }
                    if (data.returnCode == 404) {
                        $("#showTable").html("无记录");
                    }
                    page = data.pageInfo.page;
                    pageSize = data.pageInfo.pageSize;
                    totalPage = data.pageInfo.totalPage;
                    $("#pageNum").html(page);
                    $("#totalPage").html(totalPage);
                    initBtn();
                }, "json");
            }


            // 设置按钮状态
            function initBtn() {
                $("#prevPage").prop("disabled", false);
                $("#nextPage").prop("disabled", false);
                if (page <= 1) {
                    $("#prevPage").prop("disabled", true);
                }
                if (page >= totalPage) {
                    $("#nextPage").prop("disabled", true);
                }
            }
        })
    </script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>学生信息页
            <small>逝者如斯夫，不舍昼夜。</small>
        </h1>
    </div>
    <%--导航--%>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">学生详情</a></li>
    </ul>
    <br>
    <%--搜索框--%>
    <form class="form-inline">
        <div class="form-group">
            <label for="stuName">学生姓名</label>
            <input type="text" class="form-control" id="stuName" placeholder="请输入学生姓名">
        </div>
        <div class="form-group">
            <label for="stuAdd">学生住址</label>
            <input type="text" class="form-control" id="stuAdd" placeholder="请输入学生住址">
        </div>
        <button type="button" class="btn btn-success" id="queryBtn">搜索</button>
    </form>
    <%--表格--%>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>姓别</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody id="showTable"></tbody>
    </table>

    <%--分页标签--%>
    <div>
        <div class="col-lg-9">
            <input type="button" class="btn btn-default" id="prevPage" value="上一页"/>
            <span id="page"></span>
            <input type="button" class="btn btn-default" id="nextPage" value="下一页"/>
            当前第<span id="pageNum"></span>页，共<span id="totalPage"></span>页
        </div>
        <div class="col-lg-2" id="dataText">每页显示数据</div>
        <div class="col-lg-1">
            <%--下拉菜单--%>
            <select class="form-control" id="dataNum">
                <option value="5">5</option>
                <option value="10">10</option>
            </select>
        </div>
    </div>
</div>
</body>
</html>

servlet

public class PageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获得ajax的请求参数
        Integer pageSize = Integer.parseInt(req.getParameter("pageSize"));
        Integer page = Integer.parseInt(req.getParameter("page"));
        String stuName = req.getParameter("stuName");
        String stuAdd = req.getParameter("stuAdd");
        // 创建查询传参对象
        Student queryStu = new Student(stuName, stuAdd);
        // 分页查询学生信息
        List<Student> reStu = new PageServiceImpl().queryLimit(page, pageSize,queryStu);
        // map装载返回值
        Map<String,Object> map = new HashMap<>();
        if (reStu.size() == 0){
            map.put("returnCode",ReturnCode.ERROR.getCode());
            map.put("returnMsg",ReturnCode.ERROR.getMsg());
        }else {
            map.put("returnCode",ReturnCode.SUCCESS.getCode());
            map.put("returnMsg",ReturnCode.SUCCESS.getMsg());
        }
        map.put("returnData",reStu);
        // 查询总页数
        Integer total = new PageServiceImpl().queryAllStu(queryStu);
        PageInfo pageInfo = new PageInfo(page,pageSize,total);
        map.put("pageInfo",pageInfo);
        // 向浏览器响应
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        // 转换数据类型为json格式
        pw.print(JSON.toJSONString(map));
        pw.flush();
        pw.close();
    }
}

dao的impl（sql语句的动态拼接）

public class PageDaoImpl implements PageDao {
    private Connection conn;
    private PreparedStatement ps;
    private ResultSet rs;
    private List<Object> params = new ArrayList<>(4);

    @Override
    public List<Student> queryLimit(Integer page, Integer pageSize, Student queryStu) {
        List<Student> list = new ArrayList<>(10);
        conn = DBHelper.getConnection(true);
        String sql = "SELECT s.stu_name,s.stu_sex,s.stu_age,s.stu_address FROM student s";
        // 调用动态拼接sql的方法
        StringBuilder builder = sqlAppend(sql, queryStu);
        // 拼接limit语句
        builder.append(" LIMIT ?,?");
        params.add((page - 1) * pageSize);
        params.add(pageSize);
        System.out.println("limit====="+builder.toString());// 测试输出
        try {
            ps = conn.prepareStatement(builder.toString());
            for (int i = 0; i < params.size(); i++) {
                ps.setObject((i + 1), params.get(i));
            }
            rs = ps.executeQuery();
            while (rs.next()) {
                String stuName = rs.getString("s.stu_name");
                String stuSex = rs.getString("s.stu_sex");
                String stuAge = rs.getString("s.stu_age");
                String stuAdd = rs.getString("s.stu_address");
                list.add(new Student(stuName, stuSex, stuAge, stuAdd));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBHelper.closeConnection(conn, ps, rs);
        }
        params.clear();
        return list;
    }

    @Override
    public Integer queryAllStu(Student queryStu) {
        conn = DBHelper.getConnection(true);
        String sql = "SELECT count(s.id) FROM student s";
        // 调用动态拼接sql的方法
        StringBuilder builder = sqlAppend(sql, queryStu);
        System.out.println("all====="+builder.toString());// 测试输出
        Integer total = null;
        try {
            ps = conn.prepareStatement(builder.toString());
            for (int i = 0; i < params.size(); i++) {
                ps.setObject((i + 1), params.get(i));
            }
            rs = ps.executeQuery();
            if (rs.next()) {
                total = rs.getInt("count(s.id)");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBHelper.closeConnection(conn, ps, rs);
        }
        params.clear();
        return total;
    }

    // 动态拼接sql的方法
    private StringBuilder sqlAppend(String sql, Student queryStu){
        StringBuilder builder = new StringBuilder(sql);
        boolean isWhere = true;
        if (!"".equals(queryStu.getStuName()) && !(queryStu.getStuName() == null)) {
            isWhere = false;
            builder.append(" WHERE s.stu_name = ? ");
            params.add(queryStu.getStuName());
        }
        if (!"".equals(queryStu.getStuAdd()) && !(queryStu.getStuAdd() == null)) {
            if (isWhere) {
                builder.append(" WHERE ");
            } else {
                builder.append(" AND ");
            }
            builder.append("s.stu_address LIKE ?");

            params.add("%"+queryStu.getStuAdd()+"%");
        }
        return builder;
    }
}

实体类

pageInfo（totalPage的计算）

public class PageInfo {
    private Integer page;
    private Integer pageSize;
    private Integer totalPage;

    @Override
    public String toString() {
        return "PageInfo{" +
                "page=" + page +
                ", pageSize=" + pageSize +
                ", totalPage=" + totalPage +
                '}';
    }

    public PageInfo(Integer page, Integer pageSize, Integer total) {
        this.page = page;
        this.pageSize = pageSize;
        int set = (int) Math.ceil(total * 1.0 / pageSize);
        if (set == 0) {
            set = 1;
        }
        this.totalPage = set;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }
}

ReturnCode枚举类

public enum ReturnCode {
    SUCCESS("200", "成功"),
    ERROR("404", "失败");


    private String code;
    private String msg;

    private ReturnCode(String code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public String getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

关联数据库的student实体类

public class Student {
    private String stuName;
    private String stuSex;
    private String stuAge;
    private String stuAdd;

    public Student() {
    }

    public Student(String stuName, String stuAdd) {
        this.stuName = stuName;
        this.stuAdd = stuAdd;
    }

    public Student(String stuName, String stuSex, String stuAge, String stuAdd) {
        this.stuName = stuName;
        this.stuSex = stuSex;
        this.stuAge = stuAge;
        this.stuAdd = stuAdd;
    }

    @Override
    public String toString() {
        return "entity{" +
                "stuName='" + stuName + '\'' +
                ", stuSex='" + stuSex + '\'' +
                ", stuAge='" + stuAge + '\'' +
                ", stuAdd='" + stuAdd + '\'' +
                '}';
    }

    public String getStuName() {
        return stuName;
    }

    public void setStuName(String stuName) {
        this.stuName = stuName;
    }

    public String getStuSex() {
        return stuSex;
    }

    public void setStuSex(String stuSex) {
        this.stuSex = stuSex;
    }

    public String getStuAge() {
        return stuAge;
    }

    public void setStuAge(String stuAge) {
        this.stuAge = stuAge;
    }

    public String getStuAdd() {
        return stuAdd;
    }

    public void setStuAdd(String stuAdd) {
        this.stuAdd = stuAdd;
    }

}

页面效果

在这里插入图片描述

严格要求自己

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ajax练习（分页查询）

文章目录jsp页面（每个请求都需带上完整参数）servletdao的impl（sql语句的动态拼接）实体类pageInfo（totalPage的计算）ReturnCode枚举类关联数据库的student实体类页面效果jsp页面（每个请求都需带上完整参数）<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>分页练习</tit
复制链接

扫一扫