关于Ajax异步分页的一点点总结

最新推荐文章于 2022-04-27 13:47:50 发布

gryllsxu

最新推荐文章于 2022-04-27 13:47:50 发布

阅读量2.6k

点赞数

文章标签：分页

本文链接：https://blog.csdn.net/xcylive520/article/details/51263757

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 背景

前段时间整理代码发现公司里大部分页面都是同步加载的，甚至包括分页等都是同步加载的，这样势必造成对网站的多次请求，造成部分服务请求纯属浪费的行为。还有一点不合理的地方应该是分页是放在后台代码里的，而不是使用的js的分页插件。放在后台分页，分页的处理cpu，内存都是使用的服务器，使用js的话这部分工作就可以转移到用户浏览器中了，这应该也是可以优化的一部分。后台分页竟然使用String（非StringBuilder）进行拼装的。

str +="<span title='到第一页'>«</span>";
str +="<span title='上一页'>‹</span>";

于是准备修改。第一步是改成异步，第二步把分页的java代码改写成js插件。这里先介绍下异步的实现。

2. 方法

ajax实现异步加载比较简单，对于一个web工程师应该是都知道的，卤煮以前实现的方式都是ajax请求，然后返回JSON数据，再用js拼装html代码，然后append到原来的dom中。这应该是大多数的实现方式，（没有使用Angular JS等类似的前端mvc框架）。但是这样会有什么问题，js代码本来格式就相对较混乱，然后再加上html代码，看起来就是一团糟，所以就想到了另外一种方式，ajax异步直接返回html格式的页面，直接把返回的html数据append到原来的dom，这样格式看起来就会非常的清爽（这种方式的页面处理工作仍然是服务器，服务器生成html数据返回到前台）。

3 测试页面和方法

测试页面test.jsp，负责分页的事件处理

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//w4C//DTD HTML 4.01 Transitional//EN" "http://www.w4.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
</head>
<body>
<div id="result">
    <jsp:include page="/WEB-INF/pages/testList.jsp"></jsp:include>
</div>
<script type="text/javascript">
    var url="<%=basePath %>/";
    $("#pageNum").live("click", function(){
        $.ajax({
            url:"http://localhost/test/testList.do",
            type:"post",
            dataType:"html",
            data:{"page":$("#pageNum").text()},
            success: function(data) {
                $("#result").empty().append(data);
            }
        });
    });
</script>
</body>
</html>

测试分页页面testList.jsp，里面只有分页信息

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:forEach items="${list}" var="num">
    <span>${num}</span>
</c:forEach>

<div id="pageNum">${pageNum}</div>

后台Java代码

/** 主页面跳转 */
@RequestMapping(value="/test")
public String test(HttpServletRequest req, Model model) {
    List<Long> list = getList(1);
    model.addAttribute("list", list);
    model.addAttribute("pageNum", 1 + 1);
    return "/test";
}
/** 分页页面 */
@RequestMapping(value="/testList")
public String testList(HttpServletRequest req, Model model, Integer pageNum) {
    List<Long> list = getList(pageNum);
    model.addAttribute("list", list);
    model.addAttribute("pageNum", pageNum + 1);
    return "/testList";
}

private List<Long> getList(int num) {
    List<Long> list = new ArrayList<Long>();
    for (long i = num; i < num + 10; i++) {
        list.add(i);
    }
    return list;
}

这是jsp的实现，ftl的实现跟这个雷同，ftl代码可以使用freemarker的标签。

这样看分页页面就简洁了好多，最起码能够保持html格式的风格。如果写在js里面的话，简单的还好，如果还夹杂着其他的判断，那么拼装方法就会变得非常复杂，而且不利于维护。