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表单下任意输入框输 ...

随机推荐

Android开发AlertDialog解析
打开源码,首先映入眼帘的是三个构造方法,但这三个构造方法都是protected类型的, 可见,不允许我们直接实例化AlertDialog. 因此,我们再看别的有没有方法.可以实例化再仔细一看,发现一 ...
[bzoj1019][SHOI2008]汉诺塔 (动态规划)
Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. 对汉诺塔的一次合法的操 ...
编写Shell脚本（未完待续）
Shell脚本命令的工作方式有两种:交互式批处理交互式:用户每输入一条命令就立即执行批处理:由用户事先编写好一个完整的Shell脚本,Shell会一次性执行脚本中诸多命令
April Fools Day Contest 2016 D. Rosetta Problem
D. Rosetta Problem 题目连接: http://www.codeforces.com/contest/656/problem/D Description ++++++++[>+& ...
Java---线程多（工作内存）和内存模型（主内存）分析
首先解读Java内存模型(这里区别于JVM的内存模型,堆.栈.工作区) Java 内存模型来屏蔽掉各种硬件和操作系统的内存差异,达到跨平台的内存访问效果.JLS(Java语言规范)定义了一个统一的内存 ...
为什么要使用netty
选择Netty的理由在开始本节之前,我先讲一个亲身经历的故事:曾经有两个项目组同时用到了NIO编程技术,一个项目组选择自己开发NIO服务端,直接使用JDK原生的API,结果2个多月过去了,他们的NIO ...
Handling Errors and Exceptions
http://delphi.about.com/od/objectpascalide/a/errorexception.htm Unfortunately, building applications ...
Spring Bean init-method 和 destroy-method实例
在Spring中,可以使用 init-method 和 destroy-method 在bean 配置文件属性用于在bean初始化和销毁某些动作时.这是用来替代 InitializingBean和Di ...
InstallShield 2010集成.net Framework 4的安装包制作
InstallShield 2010中制作安装包时,对于集成.net Framework 4以前的版本,如3.5 sp1/3.5/3.0/2.0 sp2/2.0sp1/2.0等提供了现成的prq文件模 ...
mysql知识点（三）
1.表关联是可以利用两个表的索引的,如果是用子查询,至少第二次查询是没有办法使用索引的. 2. 为了给主查询提供数据而首先执行的查询被叫做子查询 3.如果WHERE子句的查询条件里使用了函数(WHE ...

AjaxAnyWhere 实现页面局部刷新,局部分页

AjaxAnyWhere 实现页面局部刷新,局部分页的更多相关文章

随机推荐

热门专题