AjaxAnyWhere 实现页面局部刷新_html/css_WEB-ITnose-html教程-PHP中文网

AjaxAnyWhere 实现页面局部刷新_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:55:52

原创

1429人浏览过

这个比较jquery、单纯ajax异步简单多了，不多说了直接上代码。

需要引入：ajaxanywhere-1.2.1.jar （最新）和 /ajaxAnyWhereDemo/WebRoot/js/aa.js ，免费下载地址http://download.csdn.net/detail/xuke6677/8064977

目录结构如下：

立即学习“前端免费学习笔记（深入）”；

1、ListBean.java 实体类

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

<strong><span style="font-family:System;font-size:18px;">package org.ydd.test;public class ListBean {	private String id;	private String name;	private String sex;	private String work;	private String address;        //get(),set()…… 省略}</span></strong>

登录后复制

2、 AjaxAnyWhereTest.java 后台servlet

立即学习“前端免费学习笔记（深入）”；

<strong><span style="font-family:System;font-size:18px;">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);	}}</span></strong>

登录后复制

3、web.xml

<strong><span style="font-family:System;font-size:18px;"><?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></span></strong>

登录后复制

4、index.jsp

<strong><span style="font-family:System;font-size:18px;"><%@ 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></span></strong>

登录后复制

5、list.jsp

立即学习“前端免费学习笔记（深入）”；

注：需要引入

立即学习“前端免费学习笔记（深入）”；

<strong><span style="font-family:System;font-size:18px;"><%@ 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></span></strong>

登录后复制