用Ajax实现页面的分页原理

Ajax局部刷新技术，相比之前的简易论坛的severlet跳转技术，每次改变都会跳转刷新整个页面。Ajax不用刷新整个页面，只是局部刷新。
1.首先在数据库中创建要展示的表，链接数据库，在Javaben中写查询所有要展示内容，这里不再赘述http://blog.csdn.net/sinat_32133675/article/details/74987164
2.编写severlet，在severlet中调用javaben中的方法通过json包返回json文件

将从数据库中的找到的数据（保存在list中），转换成json文件（string类型），代码如下：

//json文件    public String listToJson(List list){        JSONArray json = JSONArray.fromObject(list);        return json.toString();    }

在severlet中编写的代码如下：

public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html");        PrintWriter out = response.getWriter();        String userName = request.getParameter("userName");        UserDao userDao  = new UserDao();        int n=userDao.findById(userName);        out.print(n);        out.flush();        out.close();    }

这里只重写了doGet方法，doGet和doPost的区别就是前者在地址栏完成值得传递，后者不在地址栏显示，更安全。（PS:用户登录一定要使用doPost）。与之前的severlet跳转不同，我们可以看到，代码中并没有你跳转页面，这时需要编写一个js的文件调用
3.在jsp页面的布局和jQ代码如下：

jQ+Ajax代码：

$(function(){    function fenye(begin,end){        var t=$("table:eq(0)");    //注意json文件中的所有变量都是局部变量，无法通过值得传递拿出来，这里将长度作为一个属性加到    //标签中，在外面通过标签获取（*********）      $.getJSON("servlet/FristSrv",null,function(k){        //len=$(k).length;        //console.log(len)        //var len=0;        $("table:eq(0) tbody").html("");        var len=$(k).length;        $(k).each(function(i,n){            //alert(n.userName);            if(i<end&&i>=begin){            t.attr({"begin":begin,"end":end,"length":len});            //t.append("<tbody>")            t.append("<tr class='show'><td>"+n.subject+"</td><td>"+n.userName+"</td><td>"+n.createTime+"</td><td>"+n.createTime+"</td><td>"+n.hitCont+"</td></tr>");            //t.append("</tbody>")            }           })        //console.log(len+"---")    })    }    fenye(0,3);//这里设置的每行显示5个元素,初始化首页的显示0-5    $("#nextpage").click(function(){        var begin =parseInt( $("table:eq(0)").attr("begin"))+3;        var end =parseInt( $("table:eq(0)").attr("end"))+3;        var len = parseInt($("table:eq(0)").attr("length"));        //console.log(end);        if(end-3<len)        {            //$(".show").hide();//每点一次增加5条，这里的隐藏式隐藏已经有的            //$("table:eq(0)").html("");            fenye(begin,end);        }    })    $("#lastpage").click(function(){        var pagesize = 0;        var len = parseInt($("table:eq(0)").attr("length"));        if(len%3==0){            pagesize=parseInt(len/3);        }else{            pagesize=parseInt(len/3)+1;        }        //console.log(len);        var begin=(pagesize-1)*3;        var end=(pagesize-1)*3+3;        fenye(begin,end);    })    $("#fristpage").click(function(){        fenye(0,3);    })    $("#previouspage").click(function(){        var begin =parseInt( $("table:eq(0)").attr("begin"))-3;        var end =parseInt( $("table:eq(0)").attr("end"))-3;        var len = parseInt($("table:eq(0)").attr("length"));        //console.log(end);        if(end-3>=0)        {            //$(".show").hide();//每点一次增加5条，这里的隐藏式隐藏已经有的            //$("table:eq(0)").html("");            fenye(begin,end);        }    })})

代码中点击下一页，上页已经显示的内容就要隐藏掉，原来使用的.hide()方法。后来，考虑到工作中表页数过多的可能性，选择将上页内容通过.html(“”)清零。但是由于我的表内容是动态生成的，表头在jsp中单独打出来的，清零的时候会把表头顺表清掉。（这里卡了我好久）
解决方法：在jsp的表头文件用<thead>标签包起来，动态生成表内容的部分就会自动划分为<tbody>的内容（在sougou浏览器中是这样，其他效果我没试），每次点击按钮都会调用代码$("table:eq(0) tbody").html("");清掉点击之前展示的内容。
效果展示：