当前位置： 代码迷 >> Ajax >> Struts2的Ajax支持(二)Struts2的Ajax标签.
  详细解决方案

Struts2的Ajax支持(二)Struts2的Ajax标签.

热度：297   发布时间：2012-12-19 14:13:15.0
Struts2的Ajax支持(2)Struts2的Ajax标签...
tabbedPanel标签

　　tabbedPanel标签在HTML页面里生成类似windows程序的Tab页,通过使用Tab页,可以在有限的空间里放置更多的内容.

　　tabbedPanel标签生成的Tab页的内容即可以是静态的,也可以是动态的.如果是静态的,则直接指定Tab页里的内容;如果是动态的,则可以采用Ajax方式来动态加载Tab页的内容.

　　tabbedPanel标签生成整个Tab框架,而tabbedPanel标签里的div子标签则生成单独的Tab页,每个div子标签生成一个Tab页.因为div标签本身是一个Ajax标签,允许内容动态改变,因此,每个Tab页的内容可以动态改变.

　　使用tabbedPaned标签可以指定如下几个属性:

　　closeButton:指定Tab页上关闭按钮的位置,可能的值是tab和pane.

　　selectedTab:指定加载该页面时选择哪个Tab页面,默认是第一个Tab页面.

　　doLayout:设置tabbedPanel是否为显示固定高度,如果该属性设置为false则tabbedPanel的高度会随着Tab页大小的改变而改变.

　　labelposition:设置Tab页面中标签的位置,可以是top(顶,这是默认值);right(右);button(底);left(左).

　　下面是一个简单的静态Tab页面的代码(JSP页面代码):

　　
<%@ page conmso="text/html;charset=GBK" language="java" %> 

　　<%@ taglib prefix="s" uri="/struts-tags" %> 

　　<html> 

　　<head> 

　　<title>tabbled panel示例：简单tabbled panel</title> 

　　<s:head theme="ajax" debug="true"/> 

　　<link rel="stylesheet" type="text/css" href="<s:url value="/struts/tabs.css"/>"> 

　　</head> 

　　<body>

　　简单Tab页面，doLayout属性设置是否使用固定高度<br>

　
　<s:tabbedPanel id="tab1" theme="ajax" cssStyle="width: 400px; height: 240px;" doLayout="true"> 

　　<s:div id="left" label="第一个Tab页" theme="ajax" > 

　　Spring2.0<br> 

　　J2EE<br> 

　　Ajax<br> 

　　</s:div > 

　　<s:div id="middle" label="第二个Tab页" theme="ajax" > 

　　<h3>简介</h3>

　　有任何问题，都可以发邮件给我。<br>

　　
</s:div > 

　　</s:tabbedPanel> 

　　</body> 

　　</html>
　　我们还可以为closeButton指定值来为Tab页面增加关闭按钮。但是在一般情况下并没有这种需求。

　　tabbedPanel在Tab页中使用动态内容有两种方法：1，直接为div标签指定href属性。2，在div标签中使用Ajax主题的div。实际上，对于tabbedPanel的每个Tab页面而言，都只是一个简单的容器，用于包含其他的HTML组件。动态的tabbedPanel的JSP页面代码如下： 

　　<%@ page conmso="text/html;charset=GBK" language="java" %> 

　　<%@ taglib prefix="s" uri="/struts-tags" %> 

　　<html> 

　　<head> 

　　<title>包含动态内容的Tab页</title> 

　　<s:head theme="ajax"/> 

　　<link rel="stylesheet" type="text/css" href="<s:url value="/struts/tabs.css"/>" /> 

　　</head> 

　　<body> 

　　<s:url id="rd" value="/random.action"/> 

　　<s:tabbedPanel id="tabbedpanel" cssStyle="width: 500px; height: 240px;" doLayout="true"> 

　　<s:div id="panel1" label="动态Tab页面一" href="%{#rd}" theme="ajax"/> 

　　<s:div id="panel1" label="动态Tab页面二" theme="ajax"> 

　　<h2>您最喜欢的图书：</h2> 

　　<s:div id="panel11"href="%{#rd}" theme="ajax" updateFreq="1000"/> 

　　</s:div> 

　　<s:div id="panel2" label="静态Tab页面" theme="ajax"> 

　　<h3>简介</h3> 

　　有任何问题，都可以发邮件给我。<br> 

　　</s:div> 

　　<s:div id="panel3" label="远程表单的Tab页" theme="ajax"> 

　　<div id='show' style="background-color:#bbbbbb;width:240px;height :50px">原始静态文本</div> 

　　<s:url id="ajaxTest" value="/AjaxTest.action" /> 

　　<s:form action='AjaxTest' method='post' theme='ajax'> 

　　<s:textfield name="name" label="姓名"/><br/> 

　　<s:textfield name="age" label="年龄"/><br/> 

　　<s:submit value="提交" targets="show"/> 

　　</s:form> 

　　</s:div> 

　　</s:tabbedPanel> 

　　</body> 

　　</html>

　　使用JSON插件实现Ajax

　　1，JSON基础知识

　　JSON插件是Struts2的Ajax插件，通过利用JSON插件，允许开发者以非常灵活简单的方式来开发Ajax应用。

　　JSON的全称是JavaSrcipt Object Notation,即http://www.mso.com.cn/#对象符号,它是一种轻量级的数据交换格式.JSON的数据格式既适合人类的读写,也适合计算机的解析和生成.最早的时候,JSON是http://www.mso.com.cn/#语言的数据交换格式,后来发展成一种语言无关的数据交换格式,这点类似于XML.

　　JSON提供了多种语言之间完成数据交换的能力,因此,JSON也是一种非常理想的数据交换格式,JSON主要有如下两种数据结构:

　　1,由key-value对组成的数据结构,这种数据结构在不同的语言中,有不责骂的实现.例如:在http://www.mso.com.cn/#中是一个对象,在Java中一种Map结构,在C语言中,则是一个struct.

　　2,有序集合.这种数据结构在不同语言中,可能有list,vector,数组,序列等实现.

　　上面的两种数据结构,在不同的语言中都有对应的实现,因此,这种简便的数据表示方式完全可以实现跨语言.因此可以作为程序设计语言中通用的数据交换格式.

　　在http://www.mso.com.cn/#中主要有两种JSON的语法:一是用于创建对象;二是用于创建数组.

　　1，使用JSON语法创建对象

　　JSON语法创建对象是一种更简单的方式，使用JSON语法可避免书写函数，也可避免使用new关键字，而是直接获取一个http://www.mso.com.cn/#对象。http://www.mso.com.cn/#中创建对象的语法如下：

　　//定义一个函数作为构造器

　
　function Person(name, sex){ 

　　this.name=name; 

　　this.sex=sex; 

　　} 　　//创建一个Person实例 

　　var p = new Person('annlee','male'); 

　　//输出Person实例 

　　alert(p.name); 

　　使用JSON的语法如下： 

　　var p = { 

　　"name":'annlee',"sex":'male' 

　　}; 

　　alert(p);

　　这种语法就是一种JSON语法，显然，使用JSON语法创建对象更加简捷，方便。它的value不仅仅可以是普通的字符串，还可以是任何基本数据类型，函数，数组，另一个JSON对象等等。

　　2，使用JSON语法创建数组

　　http://www.mso.com.cn/#创建数组的语法如下：

　　
//创建数组对象 

　　var a = new Array(); 

　　//为数组元素赋值 

　　a[0]='annlee'; 

　　a[1]='male'; 

　　alert(a); 

　　或者用下面的方法： 

　　//创建数组对象 

　　var a = new Array('annlee','male'); 

　　alert(a); 

　　使用JSON语法创建数组用如下方法： 

　　//创建数组对象 

　　var a = ['annlee','male']; 

　　alert(a);


　　由于JSON语法的简单易用，而且作为数据传输载体时，数据传输量更小，因此在Ajax交互中，往往不使用XML，而是使用JSON作为数据交换格式。如果要交换一个对象person，它的name=annlee,gender=male,age=25，使用JSON语法可以简单成如下格式： 
　　person = { 

　　name:'annlee', 

　　gender:'male', 

　　age:26 

　　}


　　2，为Struts2安装JSON插件

　　JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的http://www.mso.com.cn/#。简单地说，JSON插件允许我们在http://www.mso.com.cn/#中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面----通过这种方式，就可以完成Ajax交互。

　　完装JSON插件也只需将JSON的jar包复制到工程的WEB-INFlib目录下。

　　JSON的下载地址是：http://www.json.org/ 我们下载Java1.5版本的JSON的lib包就可以了。

　　JSON的Struts2插件下载地址是：http://code.google.com/p/jsonplugin/downloads/list

　　将下载的文件json-lib-2.2.2-jdk15.jar和jsonplugin-0.30.jar复制到WEB-INFlib目录下。

　　3，实现Action逻辑

　　下面以一个例子来实现JSON的调用：

　　1，JSP页面代码：

　
　<%@ page language="java" conmso="text/html; charset=GBK"%> 

　　<script src="prototype-1.4.0.js" type="text/http://www.mso.com.cn/#"> 

　　</script> 

　　<script language="http://www.mso.com.cn/#"> 

　　function gotClick() 

　　{ 

　　//请求的地址 

　　var url = 'JSONExample.action'; 

　　//将favorite表单域的值转换为请求参数 

　　var params = Form.serialize('form1'); 

　　//创建Ajax.Request对象，对应于发送请求 

　　var myAjax = new Ajax.Request( 

　　url, 

　　{ 

　　//请求方式：POST 

　　method:'post', 

　　//请求参数 

　　parameters:params, 

　　//指定回调函数 

　　onComplete: processResponse, 

　　//是否异步发送请求 

　　asynchronous:true 

　　}); 

　　} 

　　function processResponse(request) 

　　{ 

　　$("show").innerHTML = request.responseText; 

　　} 

　　</script> 

　　<html> 

　　<head> 

　　<title>使用JSON插件</title> 

　　</head> 

　　<body> 

　　<form id="form1" name="form1" method="post"> 

　　<INPUT TYPE="text" name="field1" id="field1"/><br> 

　　<INPUT TYPE="text" name="field2" id="field2"/><br> 

　　<INPUT TYPE="text" name="field3" id="field3"/><br> 

　　<INPUT TYPE="button" value="提交" onmso="gotClick();"/> 

　　</form> 

　　<div id="show"> 

　　</div> 

　　</body> 

　　</html>


　　以上JSP页面有三个表单域，提交表单后通过异步方式发送给JSONExample.action处理。并将返回的数据放在名为show的div标签中。

　　2，Action中的代码如下： 
　
　　package lee; 

　　import java.util.HashMap; 

　　import java.util.Map; 

　　import com.opensymphony.xwork2.Action; 

　　import com.googlecode.jsonplugin.annotations.JSON; 

　　public class JSONExample 

　　{ 

　　private int[] ints = {10, 20}; 

　　private Map map = new HashMap(); 

　　private String customName = "custom"; 

　　private String field1; 

　　//'transient'不会被序列化 

　　private transient String field2; 

　　//没有setter和getter方法的字段不会被序列化 

　private String field3; 

　　public String execute() 

　　{ 

　　map.put("name", "annlee"); 

　　return Action.SUCCESS; 

　　} 

　　public String getField1() { 

　　return field1; 

　　} 

　　public void setField1(String field1) { 

　　this.field1 = field1; 

　　} 

　　public String getField2() { 

　　return field2; 

　　} 

　　public void setField2(String field2) { 

　　this.field2 = field2; 

　　} 

　　public String getField3() { 

　　return field3; 

　　} 

　　public void setField3(String field3) { 

　　this.field3 = field3; 

　　} 

　　public int[] getInts() { 

　　return ints; 

　　} 

　　public void setInts(int[] ints) { 

　　this.ints = ints; 

　　} 

　　public Map getMap() { 

　　return map; 

　　} 

　　public void setMap(Map map) { 

　　this.map = map; 

　　} 

　　@JSON(name="newName") 

　　public String getCustomName() 

　　{ 

　　return this.customName; 

　　} 

　　}


　　通过Action中的注释，可以了解到标记为'transient'的属性，以及没有get/set方法的属性不会被序列化，即不会出现在JSON的返回值中。

　　我们还可以通过@JSON注释来设置JSON返回值中的数据名称。此外JSON注释还支持如下几个域：

　　serialize:设置是否序列化该属性

　　deserialize:设置是否反序列化该属性

　　format:设置用于格式化输出,解析日期表单域的格式.例如"yyyy-MM-dd'T'HH:mm:ss"

　　3，struts.xml配置文件中的配置如下：

　
　<struts> 

　　<constant name="struts.i18n.encoding" value="UTF-8"/> 

　　<package name="example" extends="json-default"> 

　　<action name="JSONExample" class="lee.JSONExample"> 

　　<result type="json"/> 

　　</action> 

　　</package> 

　　</struts>


　　可以看到type=json的result无任何返回视图。这里还有另外两点要注意：1，struts.i18n.encoding要配置成UTF-8，国为Ajax的POST请求都是以UTF-8的方式进行编码的。2，配置包时，要扩展自json-default，因为在json-default包下才有json类型的result。

　　当然我们也可以按照普通的返回视图来实现这个功能，这就要在返回的JSP页面中将Action中需要返回的值从新做个包装。这种处理方式，我在另一篇文章中已经写过了。(http://hi.baidu.com/annleecn/blog/item/b0dc017a8ae 897f10bd18755.html)

　　在上面的页面中使用了prototype.js的Ajax.Request来完成Ajax交互，为了使用prototype.js，需要在该页面中导入prototype.js的代码库。即将prototype.js放在JSP相同的目录下。或JSP可以访问到的目录下。

　　4，显示结果： 访问JSP页面，提交后的JSON返回结果如下： {"newName":"custom","field1":"","field2":"","field 3":"","ints":[10,20],"map":{"name":"annlee"}}

　　5，解析返回值：

　　对于上面的这种JSON格式的字符串，可以借助于JSON扩展后的字符串方法将转换成一个对象，从而能以更简单的方式来访问该字符串，JSON扩展了http://www.mso.com.cn/#字符串的方法，为http://www.mso.com.cn/#字符串增加了一个parseJSON()或parse()方法，该方法用于将一个JSON格式的字符串解析成一个个JSON对象，例子代码如下：

　　
function processResponse(request){ 

　　var objectArray = JSON.parse(request.responseText); 

　　var upound = objectArray.length; 

　　for(var j =0; j < upound; j++ ){ 

　　var paramKey = objectArray[j].paramCode; 

　　if($(paramKey)){ 

　　document.getElementById("docYear_textBox").value=o bjectArray[j].paramValue; 

　　$("docYear_selectedValue").value=objectArray[j].pa ramValue; 

　　} 

　　} 

　　}


　　当然，这里也要将json.js放在同JSP一样的目录下。或JSP可以访问到的目录下。
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.