使用AjaxAnywhere实现页面局部刷新
安星汉
前言
页面局部刷新是日常工作中使用的很多的功能，通常会借助jQuery的load/get/post/ajax方法，或者使用jquery.form.js的ajaxSubmit来提交表单。
使用传统的jQuery的load/get/post/Ajax方式组装表单，以及返回的响应内容太过麻烦，除了使用jquery.form.js，我们还可以使用AjaxAnywhere来实现页面局部的刷新。
使用步骤
1.添加maven依赖：
<dependency>
<groupId>org.ajaxanywhere</groupId>
<artifactId>ajaxanywhere</artifactId>
<version>1.2-rc2</version>
</dependency>2.在web.xml中配置aa过滤器：
<!--界面局部刷新-->
<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3.测试页面：
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2017/6/1
Time: 19:10
To change this template use File | Settings | File Templates.
--%>
<%@include file="/WEB-INF/views/head.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AjaxAnywhere使用</title>
</head>
<body>
<form name="myForm" action="${ctx}/aa/test" method="post">
<table>
<tr>
<td>
<label for="username"></label>
<input type="text" name="username" id="username"/>
</td>
<td>
<button type="button" onclick="searchForm();">查询</button>
</td>
</tr>
</table>
</form>
<hr>
<aa:zone name="refreshDataZone">
<table border="1" style="border-collapse:collapse;">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>电话</td>
<td>住址</td>
</tr>
<tbody>
<c:forEach var="item" varStatus="j" items="${dataList}">
<tr>
<td>${j.index+1}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.sex==1?"男":"女"}</td>
<td>${item.phone}</td>
<td>${item.address}</td>
</tr>
</c:forEach>
</tbody>
</thead>
</table>
</aa:zone>
<script src="${ctx}/js/jquery.js"></script>
<script src="${ctx}/js/aa.js"></script>
<script>
function searchForm() {
var aa = new AjaxAnywhere();
aa.formName = "myForm";
aa.getZonesToReload = function() {
return "refreshDataZone";
};
aa.submitAJAX();
}
</script>
</body>
</html>head.jsp：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<c:set var="ctx" value="<%=path%>" />页面步骤：
1、 添加aa的标签引用；
2、 添加aa.js(ajaxAnywhere的js)
3、 在页面中使用指定需要刷新的区域。如上例
4、 点击查询的方法处理添加aa的处理。
formName:指定表单的名称；
重写aa.getZonesToReload方法，返回刷新区域的名称，中指定的名称。
最后一步调用aa.submitAJAX()；
aa会自动组装form表单的内容提交。
后台代码：
@Controller
@RequestMapping("/aa")
public class AjaxAnywhereController {
@RequestMapping("/test")
public ModelAndView aaTest() {
// 准备测试数据
List<User> users = new ArrayList<>(15);
for (int i=0;i<15;i++) {
User user = new User();
user.setUserId(new Long(i+1));
user.setName("测试用户" + (i + 1));
user.setAge((short) (Math.random() * 100));
user.setSex((short) (Math.random() < 0.5 ? 0 : 1));
user.setPhone("138-8888-8888");
user.setAddress("广东省深圳市福田区商业大厦A栋16楼");
users.add(user);
}
ModelAndView mv = new ModelAndView();
mv.setViewName("/aa/aaTest");
mv.addObject("dataList",users);
return mv;
}
}使用AjaxAnyWhere应该是实现页面局部刷新最简单的一种方式了。
传统的是直接方法一个页面，如果是Ajax请求后台需要做特殊处理，比如spring需要使用@ResponseBody来指定，前台也相应的需要修改。使用了AjaxAnyWhere后后台没有任何改动，页面仅仅需要添加几行代码就搞定了。
类似资料：