JSP交互---Ajax异步分页查询(条件分页查询)

1、页面结构

<div class="menu">
        <table>         
                <tr>
                    <td>
                    <form method="post" action="UserListServlet" id="selectName">
                            <input name="pageNo"  type="text" value="1" style="display: none;">
                             用户名： 
                            <input name="name" class="input-text" type="text" value="">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <input value="查 询" type="button" id="qureyBut">
                    </form>
                    </td>
                </tr>           
        </table>
    </div>
    <div class="main">

        <div class="optitle clearfix">
            <em><input value="添加用户" class="input-button"
                onclick="window.location='jsp/userAdd.jsp'" type="button"> </em>
            <div class="title">用户管理&gt;&gt;</div>
        </div>
        <div class="content">
            <table class="list" id="selectTable">
                    <tr>
                        <td width="70" height="29"><div class="STYLE1" align="center">编号</div>
                        </td>
                        <td width="80"><div class="STYLE1" align="center">用户名</div>
                        </td>
                        <td width="80"><div class="STYLE1" align="center">用户账号</div>
                        </td>
                        <td width="100"><div class="STYLE1" align="center">性别</div>
                        </td>
                        <td width="100"><div class="STYLE1" align="center">年龄</div>
                        </td>
                        <td width="150"><div class="STYLE1" align="center">电话</div>
                        </td>
                        <td width="150"><div class="STYLE1" align="center">权限</div>
                        </td>
                    </tr>
            </table>
            <a href="">首页</a>
            <a href="">上一页</a>
            <a href="">下一页</a>
            <a href="">末页</a>
            当前第<span id="pageNo"></span> 页 ,
            总页数:<span id="totalPage"> </span>,
            总条数:<span id="totalCount"></span>
        </div>
    </div>

页面查询后的效果图

2、使用JQ 在页面写Ajax 请求

$(function(){
        getByPageBean(1);
        $("#qureyBut").click(function(){
            getByPageBean(1);
        });
    });
function getByPageBean(pageNo){
        //设置表单的 页号参数
        $("[name=pageNo]").val(pageNo);
        /*表单数据 序列化-->表单中有个隐藏域 储存的是 页号
         *                每次异步刷新的是表格信息
         *                表单中的数据不会变动
         *                根据方法的  pageNo 参数的变动
         *                查询不同页号的 信息
         */          
        var params= $("#selectName").serialize();
//ajax 请求
$.getJSON("UserListServlet",params,function(data){
            //删除表格之前数据(标题栏除外)--->防止出现几页的数据叠加的情况
            $("#selectTable tr").not(":first").remove();
            //设置上一页 下一页连接
            $("a:eq(0)").attr("href","javascript:getByPageBean(1)");
            $("a:eq(1)").attr("href","javascript:getByPageBean("+data.previous+")");
            $("a:eq(2)").attr("href","javascript:getByPageBean("+data.next+")");
            $("a:eq(3)").attr("href","javascript:getByPageBean("+data.totalPage+")");
            //设置显示信息(当前页号,总页号,总条数)
            $("#pageNo").html(data.pageNo);
            $("#totalPage").html(data.totalPage);
            $("#totalCount").html(data.count);
//在表格添加数据 使用each方法遍历 控制器传回的数据中的list集合
$.each(data.list,function(){
    var tr="<tr>"+
                "<td height='23'><span class='STYLE1'>"+this.id+"</span></td>"+
                "<td><span class='STYLE1'> "+
                    "<a href=UserViewServlet?userId="+this.id+">" +this.name+ "</a></span></td>"+
                "<td><span class='STYLE1'> "+this.loginName+" </span></td>"+
                "<td><span class='STYLE1'> "+(this.gender==1?"男":"女") +"</span></td>"+
                "<td><span class='STYLE1'> "+this.age+"</span></td>"+
                "<td><span class='STYLE1'>"+this.phone+"</span></td>"+
                "<td><span class='STYLE1'> "+(this.type==1?"管理员":"普通员工")+" </span></td>"+
            "</tr>";
            //把每次遍历的一行数据 添加到 表格中
            $("#selectTable").append(tr);
            });
        });

3、控制器 UserListServlet

只重写了doPost方法 字符集过滤器省略

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取页号
        //默认 初始值为1
        int pageNo = 1;
        //从页面获取页号 数据
        if (request.getParameter("pageNo") != null) {
            pageNo = Integer.parseInt(request.getParameter("pageNo"));

        }
        //从页面获取 name 数据(要查询的姓名)
        String name = request.getParameter("name");

        UserServiceImpl usi = new UserServiceImpl();
        //当前页   limit 数据---->调用业务类的   根据 姓名---当前页页号(2个参数) 获取当前页的用户
        pb = usi.getAll(name,pageNo);
        //写入数据  传到页面        
        PrintWriter writer = response.getWriter();
        //参数JSON化---->这里用的是 阿里巴巴 的方法(把一个对象转成JSON)
        //需要引入fastjson-1.2.13.jar 包
        String param = JSON.toJSONString(pb);

        //把JSON 写到页面
        writer.print(param);
        writer.flush();
        writer.close();

    }

其余步骤省略 和分页查询(条件分页查询)的内容相同