struts 2的Ajax支持

最新推荐文章于 2021-08-06 16:57:21 发布

q1054261752

最新推荐文章于 2021-08-06 16:57:21 发布

阅读量326

点赞数

分类专栏： struts 2

struts 2 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

Ajax(Asumchronous Javascript and XML):

"偷偷"，在后台以”异步“方式发送请求，并用服务器响应局疗更新页面。

<?xml version="1.0" encoding="GBK" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<constant name="struts.devMode" value="true"/>
	
	
   	<package name="default" extends="struts-default">
   		
   		<action name="RegistPro" class="pers.zkr.action.RegistProAction">
   			<result>/WEB-INF/content/welcome.jsp</result>
   			<result name="input">/WEB-INF/content/login.jsp</result>
   			<result name="error">/WEB-INF/content/error.jsp</result>
   			
   		</action>
   		
   		<action name="validateName" class="pers.zkr.action.ValidateNameAction">
   			
   			<result type="stream">
   			<!-- 指定stream生成的响应数据的类型 -->
				<param name="contentType">text/html</param>
				<!-- 指定由getTip()方法返回输出结果InputStream -->
				<param name="inputName">tip</param>
			</result>
   			
   		</action>
   	
		<action name="*">
			<result>/WEB-INF/content/{1}.jsp</result>
		</action>
	</package>
	
</struts>

package pers.zkr.action;

import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;

import pers.zkr.service.UserService;

import com.opensymphony.xwork2.ActionSupport;

public class ValidateNameAction extends ActionSupport {

	private String userName;
	private String tip;

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public InputStream getTip() throws UnsupportedEncodingException{
		
		//此处就是把字符串，转换二进制流
		return new ByteArrayInputStream(tip.getBytes("utf-8"));
		
	}
	
	
	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		
		UserService us=new UserService();
		
		if(us.findUser(userName)){
			
			this.tip="<font color='red'>您输入的"+this.userName
					     +"已经存在！</font>";
			
		}else{
			
			this.tip="<font color='green'>您输入的"
			         +userName+"可以注册！</font>";
			
		}
		
		
		
		return SUCCESS;
	}
	
	
}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'login.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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.js"></script>
	<script type="text/javascript" >
	
	
		 function validateName(value){
		
		 	//向validateName发送请求，请求参数名为userName，参数值为value变量的值
		 	//服务器响应放在id为result的元素显示出来。
			$("#result").load("validateName",{userName:value});
		 
		}
	
	
	
	</script>

  </head>
  
  <body>
  <s:fielderror/>
  "
 
    <s:form action="RegistPro">
    
    	<tr>
    		<td>用户名:</td>
    		<td><s:textfield name="user.name" οnblur="validateName(this.value)" theme="simple"/> <span id="result"></span></td>
    	
    	</tr>
    	
    	
    	
    	<s:password name="user.password" label="密码"/>
    	<s:password name="rpass" label="再一次输入密码"/>
    	<s:textfield name="user.weight" label="体重"/>
    	<s:textfield name="user.birth" label="生日"/>
    	<tr>
    		<td colspan="2" align="left">
    			<s:submit value="提交" theme="simple"/>
    		</td>
    	</tr>
    </s:form>
  </body>
</html>

struts 2的Ajax支持：

无需Dojo的支持
（1）通过stream类型的result实现。
(2) 通过JSON插件来实现。

通过stream类型的result实现。

(1)客户端浏览器通过JavaScript向服务器发送Ajax请求。
（2）.A 开发一个Action
让该Action返回一个InputStream作为响应。（关键把字符串转化成二进制流）
（2）.B 配置该Action，配置时指定stream结果类型。
该结果类型向客户端生成文本响应---这就是Ajax响应。

（3）在浏览器中动态加载，并显示服务器响应。

通过JSON插件来实现Ajax

JSON是一种轻量级的数据交换格式。
{} - 对象
[] - 数组
{} - 空对象。没有属性
[] - 空数组。没有元素
{
name:‘张三’,
gender:‘男’
}
[
“abc”,{name:'sum'},[12,44]
]

(1)添加JSON插件。复制一个插件JAR包即可。

（2）使用JSON插件之后，关于配置Action进可指定一个类型为json的result.
json类型的Result会把整个Action实例转换Json字符串后直接作为服务

器响应需要注意，让我们包要继承json-default包。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'showBook.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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.js"></script>
	
	<script type="text/javascript">
		function getBooks(ele){
			
			//jquery提供的向服器发送异步的、Post请求的方法
			$.post("getBooks",$(ele).serializeArray()    //把select对象转化成请求参数
			                  ,function(data){   //代表服务响应到来时激发的函数，该函数中data就是服务器的响应
			                  
			             //data就是被调用Action
			                $("#show").empty(); //清空id为show的元素里的所有内容
			                
			                //相当于遍历被调用Action的books属性
			                
			                for(var i=0 ;i< data.books.length; i ++ ){
			                
			                  $("#show").append("<tr>"
								                	    +"<td>"
								                		+  data.books[i].id
								                		+ "</td>"
								                		+ "<td>"
								                		+  data.books[i].name
								                		+ "</td>"
								                		+ "<td>"
								                		+  data.books[i].author
								                		+ "</td>"
								                		+ "<td>"
								                		+  data.books[i].price
								                		+ "</td>"
								                  +"</tr>" ); 
			                } 
			                
			                
			                
			                
			                
			                
			                
			                
			                
			                
			                
			                
			                
			                
			       /*          
			                for(var book in data.books){
			                
			                      $("#show").append("<tr>"
								                	    +"<td>"
								                		+ book[i].id
								                		+ "</td>"
								                		+ "<td>"
								                		+ book[i].name
								                		+ "</td>"
								                		+ "<td>"
								                		+ book[i].author
								                		+ "</td>"
								                  +"</tr>" ); 
								                 
			                } */
			                  
			                  
			                  },"json");
		}
	</script>
  </head>
  
  <body>
   <s:action var="listCates" name="listCates"/>
  	请选择图书：<s:select theme="simple" name="category"
  	                  list="#listCates.cates" 
  	                  οnchange="getBooks(this)"/>
  	<table width="580" border="1">
  		<tr>
  			<th>图书ID</th>
  			<th>图书名</th>
  			<th>作者</th>
  			<th>价格</th>
  		</tr>
  		<tbody id="show"></tbody>
  	
  	
  	</table>
  
  </body>
</html>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
	   
   <constant name="struts.devMode" value="true" />
   <package name="user" namespace="/" extends="json-default">
   		
   		<action name="listCates" class="pers.zkr.action.ListCatesAction">
   		</action>
   		
   		<action name="getBooks" class="pers.zkr.action.GetBooksAction">
   		<!--json类型的Result会把整个Action实例转换Json字符串直接作为服务器响应  -->
   			<result type="json"></result>
   		</action>
   		
   		<action name="*">
   			<result>/WEB-INF/content/{1}.jsp</result>
   		</action>
   </package>
</struts>

package pers.zkr.action;

import java.util.List;

import pers.zkr.bookservice.BookService;
import pers.zkr.domain.Book;

import com.opensymphony.xwork2.ActionSupport;

public class GetBooksAction extends ActionSupport {

	private String category;
	private List<Book> books;
	
	public String getCategory() {
		return category;
	}

	public void setCategory(String category) {
		this.category = category;
	}

	public List<Book> getBooks() {
		return books;
	}

	public void setBooks(List<Book> books) {
		this.books = books;
	}

	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		
		BookService bs=new BookService();
		
		this.books=bs.getBooksByCategories(category);
		
		
		return SUCCESS;
	}
	
	
	
}

package pers.zkr.action;

import java.util.List;

import pers.zkr.bookservice.BookService;

import com.opensymphony.xwork2.ActionSupport;

public class ListCatesAction extends ActionSupport {

	private List<String> cates;

	public List<String> getCates() {
		return cates;
	}

	public void setCates(List<String> cates) {
		this.cates = cates;
	}
	
	@Override
	public String execute(){
		
		BookService bs=new BookService();
		
		this.cates=bs.getAllCategories();
		
		return SUCCESS;
	}
}