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();    }

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