jQuery ajax实现分页查询的前台代码

<body>
<%--    table用来存放值--%>
    <table border="1" cellpadding="0" cellspacing="0" id="table">

    </table><br/>
<%--    div用来存放数值--%>
    <div id="div"></div>
</body>
</html>
<script type="text/javascript">
    //一进页面就先执行show方法
    show();
        //执行show方法的时候给一个参数currentPage,当前页面的参数
        function show(currentPage){
            //如果当前页面为空
            if(currentPage == null){
                //那么就赋值为1
                currentPage = 1;
            }
            //拿到标签并且转换为jquery对象
            var $table = $("#table");
            var $div = $("#div");
            //追加一个头部识别的东西
            $table.append("<tr><td>编号</td><td>创建人</td><td>总金额</td><td>状态</td><td>执行人</td></tr>");
            $.ajax({
                type        :"post",
                url         :"/ajax/servlet/ResponseJson",
                //把当前页面这个参数传递到后台
                data        :"currentPage="+currentPage,
                //获得的是一个json数据类型
                dataType    :"json",
                //成功的话通过相应得到一个result结果
                success:function(result) {
                    //先移除$table中的值，否则会一直在屏幕存在，没有替换的效果
                    $table.empty("");
                    //得到json数据中的名为list的数据
                    var resultList = result.list;
                    //得到json数据中的名为totalPage的数据
                    var resultTotalPage = result.totalPage;
                    //将这两个数据转换为jQuery对象
                    var $resultList = $(resultList);
                    var $resultTotalPage = $(resultTotalPage);
                    //通过each遍历输出
                    $resultList.each(function () {
                            $table.append("<tr><td>" + this.taskNo + "</td><td>" + this.informant + "</td><td>" + this.amount + "</td><td>" + this.status + "</td><td>" + this.pendingPerson + "</td></tr>");
                        });
                    //移除，道理和上面相同
                    $div.empty("");
                    //通过for循环输出
                    for(var i = 1;i<=resultTotalPage;i++){
                        //这里需要注意一下，循环的时候，追加了a标签，但是这个a标签不执行跳转，只执行show方法
                        //并且通过点击时间的show方法，把当前页面的值传递过去
                        $div.append("<a href='javascript:void(0)' onclick='show("+i+")'>"+i+"</a>");
                    }
                }
            })
        }
</script>

servlet中的代码

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置字符集编码格式
        resp.setContentType("text/html;charset=utf-8");
        //声明并且赋值
        PrintWriter out = resp.getWriter();
        //调用service业务逻辑层
        SelectNarutoService selectNarutoService = new SelectNarutoServiceImpl();
        //实例化分页工具类
        Pagination pagination = new Pagination();
        //实例化集合
        List<Naruto> list = new ArrayList<>();
        //调用数据访问层的方法得到总数据
        int totalData = selectNarutoService.selectNumber();
        //得到当前页数
        int currentPage = Integer.parseInt(req.getParameter("currentPage"));
        //将当前页数和总数据放入之后可以在下面得到总页数
        pagination.setCurrentPage(currentPage);
        pagination.setTotalData(totalData);
        //得到总页数
        int totalPage = pagination.getTotalPage();
        //得到想要查询数据的一个集合
        list = selectNarutoService.selectNaruto(pagination);
        //拼接字符串，这里比较难
        //道理就是将一个集合通过引入的jar包的方法(推荐使用阿里巴巴的,这里使用的我腾的jar包,咱也不知道从哪里来的,咱也不敢问)
        // 转换为了json数据，并且这个数据的名字为list
        //第二个数据的名字为totalPage，数据为总页面
        //将其都变为字符串的数据拼接到了一起，并且赋值给一个String数据类型
        String str = "{\"list\":"+JSONArray.fromObject(list)+",\"totalPage\":"+totalPage+"}";
        //String str = String.valueOf(JSONArray.fromObject(list));
        //输出(相应)到前端(jsp/thml)页面
        out.print(str);
重难点简介，首先一进入页面就要先执行show()方法
//一进页面就先执行show方法
    show();

得到当前页面

//如果当前页面为空
            if(currentPage == null){
                //那么就赋值为1
                currentPage = 1;
            }

输出并且在点击的时候从进入show()方法，并且将当前页面 传递过去

$div.append("<a href='javascript:void(0)' onclick='show("+i+")'>"+i+"</a>");

在这里进行传递

//把当前页面这个参数传递到后台
       data        :"currentPage="+currentPage,

servlet中最重要的就是拼接的时候，这里比较麻烦，各种转义符和连接

String str = "{\"list\":"+JSONArray.fromObject(list)+",\"totalPage\":"+totalPage+"}";