4.2 使用AJAX实现分页

4.2.1 需求

需要将分页数据通过ajax的方式进行分页,实现只变更部分数据的功能.

4.2.2 实现原理

1.设置Servlet的response的格式为application/json,
2.借助于jackson库的ObjectMapper类将分页数据转换为json字符串的形式.
3.使用response的writer写出内容.
4.在前端jsp页面接收数据,并将数据格式化为html文本,写入到指定html元素中.

4.2.3 步骤

4.2.3.1 改写servlet

原先是通过设置request的域属性,将页面数据传到jsp,使用jtsl引用.
现在是将数据转换为json字符串.传给jsp页面,然后由ajax处理.

//设置request属性
//request.setAttribute("pageObject", pageObject);
PrintWriter out = response.getWriter();
ObjectMapper mapper = new ObjectMapper();
out.println(mapper.writeValueAsString(pageObject));
out.flush();
out.close();
//转发到首页
//request.getRequestDispatcher("indexindex.jsp").forward(request, response);

4.2.3.2 html页面

<body>
    <table border="1">
        <tr>
            <th>花卉编号</th>
            <th>花卉名称</th>
            <th>价格(元)</th>
            <th>原产地</th>
        </tr>
        <tbody id="mytbody"></tbody>
    </table>
    <a href="">上一页</a>
    <a href="">下一页</a>
</body>
//tbody 标签用于接收ajax设置的内容

4.2.3.3 引入jQuery脚本,设置函数初始值

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var pageSize = 2;
var pageNumber = 1;
var total = 0;

</script>
//用户第一次访问的时候,需要初始化页面大小/从第一页开始/总页数为0

4.2.3.4 编写分页html代码生成函数

这个函数的作用是,去提交ajax的http请求,请求分页数据,然后将分页数据格式化为html代码,写入tbody标签中

//通用ajax的方式从服务器读取数据
function getMyData() {
    $.post("page", {"pageNumber":pageNumber},function (data) {
            total=data.pageTotal;
            pageNumber=data.pageNumber;
            var result = "";
            for(var i = 0;i<data.list.length;i++){
                result+="<tr>";
                result+="<td>"+data.list[i].id+"</td>";
                result+="<td>"+data.list[i].name+"</td>";
                result+="<td>"+data.list[i].price+"</td>";
                result+="<td>"+data.list[i].product+"</td>";
                result+="</tr>";
            }
            $("#mytbody").html(result);//配置元素的html内容
        }
    );
}

4.2.3.5 在初始化部分调用html代码生成函数

用户第一次访问页面的时候,调用函数生成分页数据.

$(document).ready(function () {
    var pageSize = 2;
    var pageNumber = 1;
    var total = 0;
    //默认调用一次,加载数据
    getMyData();
</script>

4.2.3.6 分页选择按钮或者链接

当用户点击上一页/下一页链接时,触发的时间函数;
上一页:判断如果当前页大于1,则进行数据申请;小于1则设置页编号为1,而且不做数据申请.
下一页:类似,比较当前页和总页数.

//上一页
$("a:eq(0)").click(function(){
    pageNumber = pageNumber -1;
    if(pageNumber>=1){
        getMyData();
    }else{
        pageNumber = 1;
    }
    return false;
});

//下一页
$("a:eq(1)").click(function(){
    pageNumber = pageNumber +1;
    if(pageNumber<=total){
        getMyData();
    }else{
        pageNumber = total;
    }
    return false;
});

java使用AJAX实现数据分页