使用AjaxAnywhere实现页面局部刷新

最新推荐文章于 2020-12-11 14:20:50 发布

luckystar2008

最新推荐文章于 2020-12-11 14:20:50 发布

阅读量661

点赞数

文章标签： AjaxAnyWhere 局部刷新

本文链接：https://blog.csdn.net/qincidong/article/details/82252172

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

前言

页面局部刷新是日常工作中使用的很多的功能，通常会借助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后后台没有任何改动，页面仅仅需要添加几行代码就搞定了。