標籤：頁面局部重新整理架構 局部重新整理 ajax局部重新整理
這個比較jquery、單純ajax非同步簡單多了，不多說了直接上代碼。
需要引入：ajaxanywhere-1.2.1.jar （最新）和 /ajaxAnyWhereDemo/WebRoot/js/aa.js ，免費http://download.csdn.net/detail/xuke6677/8064977
目錄結構如下：
1、ListBean.java 實體類
<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>();@Overridepublic 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>
<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
註：需要引入<script language="javascript" src="js/aa.js"></script>
<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>
AjaxAnyWhere 實現頁面局部重新整理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
