用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=begin){
            t.attr({"begin":begin,"end":end,"length":len});
            //t.append("")
            t.append(""+n.subject+""+n.userName+""+n.createTime+""+n.createTime+""+n.hitCont+"");
            //t.append("")
            }   
        })
        //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//$(".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的表头文件用标签包起来，动态生成表内容的部分就会自动划分为的内容（在sougou浏览器中是这样，其他效果我没试），每次点击按钮都会调用代码$("table:eq(0) tbody").html("");清掉点击之前展示的内容。
效果展示：