【Struts2】Struts2学习(8) Ajax与Json(2)_H5之家 - 中国HTML5教程资源分享第一站

var p = {“name”:’yas’,”sex”:’male’}; alert(p); 使用JSON语法创建JavaScript对象时，属性值不仅可以是普通字符串，也可以是任何基本数据类型，还可以是函数、数组，甚至是灵位一个JSON语法创建的对象。

person= { name:’yee’, sex:’female’, son:{ name:’non’, grade:1 }, info: function(){ document.writeln(“姓名:”+this.name + “性别：”+this.sex); } }

使用Json语法创建数组

在早期JavaScript语法里，通过如下方式创建数组

//创建数组对象 var a = new Array(); //为数组元素赋值 a[0]=’yee’; a[1]=’non’; //或者这种方式 var a = new Array(‘yee’,’non’); 使用JSON语法创建数组

var a = [‘yee’,’non’];Action类代码

public class JSONExample { //模拟处理结果的属性 private int[] ints = {10, 20}; private Map<String , String> map = new HashMap<String , String>(); private String customName = "顾客"; //封装请求参数的三个属性 private String field1; //'transient'修饰的属性不会被序列化 private transient String field2; //没有setter和getter方法的字段不会被序列化 private String field3; public String execute() { map.put("name", "疯狂Java讲义"); return Action.SUCCESS; } //使用注释语法来改变该属性序列化后的属性名 @JSON(name="newName") public Map getMap() { return this.map; } //customName属性的setter和getter方法 public void setCustomName(String customName) { this.customName = customName; } public String getCustomName() { return this.customName; } //field属性的setter和getter方法 … }

上面代码使用了JSON注释，指定了name属性，name属性用于改变JSON对象的属性名字。

JSON注释还支持如下几个属性

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

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

format:设置用于格式化输出、解析日期表单域格式。如”yyyy-MM-dd’T’HH:mm:ss”

JSON插件提供了一种json类型的Result，如果为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。JSon插件会负责将Action里的状态信息序列化成JSON格式的字符串，并将该字符串返回给客户端。这里需要用到struts2-json-plugin-2.2.1.jar

配置struts.xml

<constant name="struts.i18n.encoding" value="UTF-8"/> <package name="example" extends="json-default"> <action name="JSONExample" class="org.crazyit.app.action.JSONExample">  <result type="json">  <param name="noCache">true</param> <param name="contentType">text/html</param>   </result> </action> <action name="*"> <result>/WEB-INF/content/{1}.jsp</result> </action> </package>

注意编码格式需要为UTF-8，因为Ajax的POST请求都是以UTF-8编码的。

配置包时，要继承json-defalut包，只有在该包下才有json类型的Result。

配置json类型的Result时，可以指定如下常用参数。

参数名

合法值

默认值

说明

excludeProperties

逗号隔开多个属性名的表达式

所有匹配其中任意一个属性名表达式的属性都不会被序列化到JSON字符串中

IncludeProperties

逗号隔开的多个属性名表达式

所有匹配其中任意一个属性名表达式的属性都会被序列化到JSON字符串中

root

OGNL表达式，确定Action内某个属性

设置该参数将不再把整个Action对象序列化成JSON字符串。而是只将该参数所指定的Action属性序列化成JSON字符串

wrapPrefix

任意字符串

Json结果字符串添加前缀

wrapSuffix

任意字符串

Json结果字符串添加后缀

ignoreHierarchy

true或false

true

默认情况下，JSON插件只序列化Action对象的本身的属性，不会理会它的父类属性，将该属性设置为false,将会序列化从Object类开始、所有父类、直到该Action类中所包含的全部属性。

enableGZIP

true或false

false

设置是否对JSON响应启用gzip压缩，如果启用gzip压缩，需要浏览器支持。

noCache

true 或 false

false

设置是否取消浏览器缓存。设置为true。响应头将会是

Cache-Control:no-cache

Expires:0

Pragma:No-cache

excludeNullProperties

ture 或 false

false

设置是否不序列化属性值为null的属性。

contentType

合法的MIME类型

text/html

设置服务器的响应类型，默认是text/html

JSP页面

用到了一个JavaScript框架： Prototype.js 通过使用该框架，可以更加简单地访问页面中的DOM节点，实现Ajax交互，避免去创建XMLHttpRequest、发送异步请求。
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>使用JSON插件</title> <script src="${pageContext.request.contextPath}/prototype-1.6.1.js" type="text/javascript"> </script> <script type="text/javascript"> 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) { //使用JSON对象将服务器响应解析成JSON对象 alert(request.responseText); var res = request.responseText.evalJSON(); alert(res); //遍历JSON对象的每个属性 for(var propName in res) { $("show").innerHTML += propName + " --> " + res[propName] + "<br/>"; } } </script> </head> <body> <s:form id="form1"> <s:textfield name="field1" label="Field 1"/> <s:textfield name="field2" label="Field 2"/> <s:textfield name="field3" label="Field 3"/> <tr><td colspan="2"> <input type="button" value="提交" onclick="gotClick();"/> </td></tr> </s:form> <div id="show"> </div> </body> </html>