AjaxAnyWhere 实现页面局部刷新,局部分页
这个比較jquery、单纯ajax异步简单多了。不多说了直接上代码。
须要引入：ajaxanywhere-1.2.1.jar （最新）和 /ajaxAnyWhereDemo/WebRoot/js/aa.js ，
免费下载地址http://download.csdn.net/detail/xuke6677/8064977
文件夹结构例如以下：
1、ListBean.java 实体类
package org.ydd.test;
public class ListBean {
private String id;
private String name;
private String sex;
private String work;
private String address;
//get(),set()…… 省略
}
2、 AjaxAnyWhereTest.java 后台servlet
package org.ydd.test; import java.io.IOException; import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class AjaxAnyWhereTest extends HttpServlet {
private static final long serialVersionUID = -5750167075517567170L;
List<ListBean> rs = new ArrayList<ListBean>(); @Override
public void init() throws ServletException {
ListBean userBean = new ListBean();
userBean.setId("1");
userBean.setName("张三");
userBean.setSex("123");
userBean.setWork("prom");
userBean.setAddress("fdsfsd");
rs.add(userBean);
} public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ListBean userBean = new ListBean();
String id= request.getParameter("id");
if(!"".equals(id) && id!=null){
userBean.setId(id);
userBean.setName(request.getParameter("name"));
userBean.setAddress(request.getParameter("address"));
userBean.setSex(request.getParameter("sex"));
userBean.setWork(request.getParameter("work"));
rs.add(userBean);
} if(rs.size()>0){
request.setAttribute("queryList", rs);
} request.getRequestDispatcher("list.jsp").forward(request, response);
} }
3、web.xml
<? xml version="1.0" encoding="UTF-8"? >
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- Ajax配置開始,带编码转换(包含ajax提交的编码) -->
<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
<init-param>
<param-name>encoding</param-name><!-- 普通提交方式编码 -->
<param-value>GB2312</param-value>
</init-param>
<init-param>
<param-name>ajaxencoding</param-name><!-- AJAX提交方式编码 -->
<param-value>GB2312</param-value>
</init-param>
</filter> <filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*</url-pattern>
</filter-mapping> <servlet>
<servlet-name>AjaxAnyWhereTest</servlet-name>
<servlet-class>org.ydd.test.AjaxAnyWhereTest</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>AjaxAnyWhereTest</servlet-name>
<url-pattern>/AjaxAnyWhereTest</url-pattern>
</servlet-mapping> <!-- Ajax配置结束 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
4、index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<jsp:forward page="AjaxAnyWhereTest"/>
</body>
</html>
5、list.jsp
注：须要引入<script language="javascript" src="js/aa.js"></script>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxAnywhere局部刷新</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script language="javascript" src="js/aa.js"></script>
<script type="text/javascript">
<!-- 所要提交的表单 -->
ajaxAnywhere.formName="listForm";
<!-- 所要刷新的区域 -->
ajaxAnywhere.getZonesToReload = function(){
return "formlist";
}
//提交
function doCheck(){
var id = document.getElementById("id").value;
if(id==""){
alert("请填写ID编号！");
return false;
}
var f=document.forms[0];
f.action="AjaxAnyWhereTest";
ajaxAnywhere.submitAJAX();
}
</script> </head> <body> <center>
<div>列表</div>
<aa:zone name="formlist">
<table border="1">
<tr>
<td>ID编号 </td>
<td>姓名</td>
<td>性别</td>
<td>工作行业</td>
<td>地址</td>
</tr>
<c:forEach var="listbean" items="${queryList}">
<tr>
<td>${listbean.id}</td>
<td>${listbean.name}</td>
<td>${listbean.sex}</td>
<td>${listbean.work}</td>
<td>${listbean.address}</td>
</tr>
</c:forEach>
</table>
</aa:zone>
</center>
<br>
<br>
<hr>
<center>
<div> <h3>录入</h3></div>
<form name="listForm" action="AjaxAnyWhereTest" method="post">
<table>
<tr>
<td>ID编号 :</td><td><input type="text" name="id" id="id"/></td>
</tr>
<tr>
<td>姓名 :</td><td><input type="text" name="name" /></td>
</tr>
<tr>
<td>性别 :</td><td><input type="text" name="sex" /></td>
</tr>
<tr>
<td>工作行业:</td><td><input type="text" name="work" /></td>
</tr>
<tr>
<td>地址:</td><td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="button" value="提交" onclick="return doCheck()" /></td ><td><input type="reset" value="取消" /></td >
</tr> </table>
</form>
</center>
</body>
</html>
能够封装一下
定义空的form表单仅仅做跳转用<form name="listForm" action="/newActivity/hotSummerDays.html" method="post"></form>
var url = "/newActivity/hotSummerDays.html? tradeId=lightenCountAndUser";
publicSch("formlist","listForm",url);<span style="white-space:pre">
function publicSch(listName,formName,url){
ajaxAnywhere.formName=formName;
ajaxAnywhere.getZonesToReload = function(){
return listName;
}
var f=document.listForm;
f.action=url;
ajaxAnywhere.submitAJAX();
}
6、注意问题：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVrZTY2Nzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
点击确定会显示详细的错误信息，例如以下
<body>
<h1>
HTTP Status 404 - /newActivity/undefined
</h1>
<HR size="1" noshade="noshade">
<p>
<b>type</b> Status report
</p>
<p>
<b>message</b>
<u>/newActivity/undefined</u>
</p>
<p>
<b>description</b>
<u>The requested resource is not available.</u>
</p>
<HR size="1" noshade="noshade">
<h3>
Apache Tomcat/6.0.41
</h3>
</body>
1、假设有使用jquery。一定要注意js的载入顺序。
<title></title>
<script type="text/javascript" charset="utf-8" src="/js/aa.js"/>
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script> </head>
2、
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVrZTY2Nzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
7、能够用在局部分页，仅仅刷新分页的地方
AjaxAnyWhere 实现页面局部刷新,局部分页的更多相关文章
- ASP.NET使用ajax实现分页局部刷新页面
listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) & ...
- MVC无刷新分页（即局部刷新，带搜索，页数选择，排序功能）
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- jquery实现页面局部刷新
后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...
- Webform——页面局部刷新
有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控 ...
- ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部
本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...
- ionic局部刷新页面与刷新整个页面
1.全局刷新,禁用缓存: 在app.js中设置cach:false,如下: .state('material', { url: '/material', cache:false, templateUr ...
- Jquery实现form表单提交后局部刷新页面的多种方法
最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...
随机推荐
- BZOJ 1030 [JSOI2007]文本生成器（AC自动机）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1030 [题目大意] 求出包含任意一个给定串的串数量 [题解] 我们求出不包含任意一个给 ...
- python3-开发进阶Flask的基础(4)
今日内容: 上下文管理:LocalProxy对象 上下文管理: 请求上下文: request/session app上下文:app/g 第三方组件:wtforms 1.使用 ...
- adroid swipeRefreshLayout无法显示进度条的问题
一句话经验:必须嵌套scrollerview或者listview
- Eclipse里选中一个变量后，这个类里的该变量不变色了？
Eclipse里选一个变量后,这个类里的该变量不变色了. 1.使用“Alt+Shift+O”对该提示功能的开/关切换 2.可以在以下设置选中后的文本提示颜色 window--> Prefere ...
- Velocity模板学习（一）
一.Velocity是什么 Velocity是一个基于Java的模板引擎,允许任何人仅仅简单地使用模板语言就可以引用由Java代码编写的对象. 二.Velocity的基本语法 1.变量 变量的定义 在 ...
- PAT甲级1017. Queueing at Bank
PAT甲级1017. Queueing at Bank 题意: 假设一家银行有K台开放服务.窗前有一条黄线,将等候区分为两部分.所有的客户都必须在黄线后面排队,直到他/她轮到服务,并有一个可用的窗口. ...
- nodejs 导入导出模块module.exports向外暴露多个模块 require导入模块
.moudel.exports 导出模块 导出单个模块 // user.js moudel.exports = 函数名或者变量名: //app.js 导入 require('user.js') 当然. ...
- MariaDB Audit Plugin 1.2
下载地址:https://downloads.mariadb.com/enterprise/bbfz-atd2/mariadb-audit-plugin/server_audit-1.2.0.tar. ...
- java.lang.RuntimeException: java.io.IOException: invalid constant type: 15
java.lang.RuntimeException: java.io.IOException: invalid constant type: 15 controller通过dubbo调用servic ...
- python笔记19-获取当前运行函数名称和类方法名称
前言 写完代码之后,一般为了方便查看日志,可以在日志输出中加入当前运行的函数名称或类和方法名称,以便于代码报错的时候能快速找到报错的是哪个函数或方法. 那么如何获取当前运行函数(或方法)的名称呢? 获 ...