刚刚看了一下struts2/docs/json-plugin.html文档,正好前几天研究一下jQuery的API今天就试着练练jQuery做个 Study_Notes.

IDE: eclipse-jee-galileo-SR2-linux-gtk

例子完整的源代码,日志最下面有下载.


1.注解方式
1//name属性改变成了youName
2@JSON(name="youName")
3publicStringgetName(){
4returnname;
5}
6
7//不序列化(不发给前台)
8@JSON(serialize=false)
9publicbooleanisSex(){
10returnsex;
11}
12
13//指定日期格式
14@JSON(format="yyyy-MM-dd")
15publicDategetDate(){
16returndate;
17}
18
19//这个有点难理解目前我不知道有什么作用,从单词的角度来看意思是反序列化=false,望高手解答
20@JSON(deserialize=false)
21publicintgetAge(){
22returnage;
23}


2.xml配置方式
1<!--想使用json-plugin就得继承-->
2<packagename="study"extends="json-default">
3<global-results>
4<!--此包类的Action类没指result属性的就全使用此属性-->
5<resulttype="json"/>
6</global-results>
7
8<!--Examples:1-->
9<actionname="jsonAction"class="alex.study.jsonplugin.JsonAction"/>
10
11<!--Examples:2-->
12<actionname="jsonAnnotationAction"class="alex.study.jsonplugin.JsonAnnotationAction"/>
13
14<!--Examples:3-->
15<actionname="jsonExcludingAction"class="alex.study.jsonplugin.JsonExcludingAction">
16<resulttype="json">
17<!--序例化不包含以下匹配的属性-->
18<paramname="excludeProperties">
19password,
20map.text,
21map.*
22</param>
23</result>
24</action>
25
26<!--Examples:4-->
27<actionname="jsonIncludingAction"class="alex.study.jsonplugin.JsonIncludingAction">
28<resulttype="json">
29<!--序例化只包含以下正则表达式匹配的属性-->
30<paramname="includeProperties">
31^password,
32^map\.\w+
33</param>
34</result>
35</action>
36
37<!--Examples:5-->
38<actionname="jsonRootAction"class="alex.study.jsonplugin.JsonRootAction">
39<resulttype="json">
40<!--指定jsonArray属性为json的根元素-->
41<paramname="root">
42jsonArray
43</param>
44</result>
45</action>
46
47<!--Examples:6-->
48<actionname="jsonRootActionCopy1"class="alex.study.jsonplugin.JsonRootAction">
49<resulttype="json">
50<paramname="root">
51jsonArray[1]
52</param>
53
54<!--包装JSON
55<paramname="wrapPrefix">/*</param>
56<paramname="wrapSuffix">*/</param>
57
58这样在前台的javascript得拆包装
59varresponseObject=eval("("+data.substring(data.indexOf("\/\*")+2,data.lastIndexOf("\*\/"))+")");
60-->
61
62<!--如果该参数的前缀设置为true,将生成的JSON的前缀"{}&&“。这将有助于防止劫持-->
63<paramname="prefix">true</param>
64
65<!--开启gzip 压缩-->
66<paramname="enableGZIP">true</param>
67
68<!--不缓存-->
69<paramname="noCache">true</param>
70
71<!--如果有属性值为空,则不发送此属性-->
72<paramname="excludeNullProperties">true</param>
73
74<!--指定个状态码-->
75<paramname="statusCode">404</param>
76
77<!--设置上下文头信息-->
78<paramname="contentType">text/html</param>
79
80</result>
81</action>
82</package>

3.html
1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<htmlxmlns="http://www.w3.org/1999/xhtml">
3<head>
4<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
5<title>UserStruts2JSONPlugin</title>
6<!--importjQueryUI-->
7<linkrel="stylesheet"type="text/css"href="jquery/css/redmond/jquery-ui-1.8.2.custom.css"/>
8<scripttype="text/javascript"src="jquery/jquery-1.4.2.min.js"></script>
9<scripttype="text/javascript"src="jquery/jquery-ui-1.8.2.custom.min.js"></script>
10<scripttype="text/javascript"src="jquery/jquery.ui.datepicker-zh-CN.js"></script>
11
12<!--importtheproject-->
13<linkrel="stylesheet"type="text/css"href="css/default.css"/>
14<scripttype="text/javascript"src="js/default.js"></script>
15</head>
16<body>
17<h3>Struts2-json-plugin.jar的使用 (Struts2 +jQuery)</h3>
18<ul>
19<li>
20<divclass="box">
21<h3>Examples:1</h3>
22<h5>获取jsonAction JSON</h5>
23<buttonclass="but"id="mySubmit1">获取</button>
24</div>
25</li>
26
27<li>
28<divclass="box">
29<h3>Examples:2</h3>
30<h5>注解方式配置json</h5>
31<labelfor="name">昵称:&nbsp;&nbsp;</label><inputtype="text"name="name"id="name"value="testName"/><br/>
32<labelfor="age">年龄:&nbsp;&nbsp;</label><inputtype="text"name="age"id="age"value="18"/><br/>
33<labelfor="sex">姓别:&nbsp;&nbsp;</label><inputtype="text"name="sex"id="sex"value="true"/><br/>
34<labelfor="date">生日:&nbsp;&nbsp;</label><inputtype="text"name="date"id="date"/><br/>
35<buttontype="button"class="but"id="mySubmit2">submit</button>
36</div>
37</li>
38
39<li>
40<divclass="box">
41<h3>Examples:3</h3>
42<h5>ExcludeProperties方式配置json</h5>
43<labelfor="username">用户名:&nbsp;&nbsp;</label><inputtype="text"name="username"id="username"value="usernamevalue"/><br/>
44<labelfor="password">&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;</label><inputtype="password"name="password"id="password"value="12345678value"/><br/>
45<buttontype="button"class="but"id="mySubmit3">submit</button>
46</div>
47</li>
48<li>
49<divclass="box">
50<h3>Examples:4</h3>
51<h5>Includingproperties方式配置json</h5>
52<labelfor="username1">用户名:&nbsp;&nbsp;</label><inputtype="text"name="username1"id="username1"value="usernamevalue"/><br/>
53<labelfor="password1">&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;</label><inputtype="password"name="password1"id="password1"value="12345678value"/><br/>
54<buttontype="button"class="but"id="mySubmit4">submit</button>
55</div>
56</li>
57<li>
58<divclass="box">
59<h3>Examples:5</h3>
60<h5>指定哪个属性为Root方式配置json</h5>
61<buttontype="button"class="but"id="mySubmit5">submit</button>
62</div>
63</li>
64
65<li>
66<divclass="box">
67<h3>Examples:6</h3>
68<h5>其它配置</h5>
69<buttontype="button"class="but"id="mySubmit6">submit</button>
70</div>
71</li>
72
73</ul>
74<divid="dialog"title="温馨提示">
75<p>这是一个提示窗体</p>
76</div>
77</body>
78</html>

4.default.js (jQuery)
1$(document).ready(function(){
2
3/*ID为dialog元素包装成UI对话框,属性:不自动打开,打开时其它项禁用,显示/隐藏时指定的动画效果*/
4var$dialog=$("#dialog").dialog({autoOpen:false,modal:true,show:'drop',hide:'drop'});
5
6/*Examples:1*/
7$("#mySubmit1").button({icons:{secondary:'ui-icon-clock'}}).click(function(){ //为button增加JqueryUI按钮增加单击事件
8$.getJSON("jsonAction.action",function(json){ //以Ajax方式提交请求获取JSON
9$dialog.find("p").html("当前服务器的时间是:"+json.date+"<br/>获取的JSON:"+json.toSource()); //获取的JSON装入提示窗体的P元素内
10$dialog.dialog("open");//打开对话框
11});
12});
13
14/*Examples:2*/
15//选择data成为jqueryUI的 日期选择
16$("#date").datepicker();
17$("#mySubmit2").button({icons:{secondary:'ui-icon-disk'}}).click(function(){
18varsendJson={
19name:$("#name").val(),
20age:$("#age").val(),
21sex:$("#sex").val(),
22date:$("#date").val()
23};
24$.post("jsonAnnotationAction",sendJson,function(json){
25//显示获取的JSON
26$dialog.find("p").html("name:"+json.youName+"<br/>获取的JSON:"+json.toSource());
27$dialog.dialog("open");
28},"json");
29});
30
31//
32
33/*Examples:3*/
34$("#mySubmit3").button({icons:{secondary:'ui-icon-disk'}}).click(function(){
35varsendJson={
36username:$("#username").val(),
37password:$("#password").val()
38};
39$.post("jsonExcludingAction",sendJson,function(json){
40//显示获取的JSON
41$dialog.find("p").html("获取的JSON:"+json.toSource());
42$dialog.dialog("open");
43},"json")
44});
45
46/*Examples:4*/
47$("#mySubmit4").button({icons:{secondary:'ui-icon-disk'}}).click(function(){
48varsendJson={
49username:$("#username1").val(),
50password:$("#password1").val()
51};
52$.post("jsonIncludingAction",sendJson,function(json){
53//显示获取的JSON
54$dialog.find("p").html("获取的JSON:"+json.toSource());
55$dialog.dialog("open");
56},"json")
57});
58
59/*Examples:5*/
60$("#mySubmit5").button({icons:{secondary:'ui-icon-clock'}}).click(function(){
61$.getJSON("jsonRootAction",function(json){
62//显示获取的JSON
63$dialog.find("p").html("获取的JSON:"+json.toSource());
64$dialog.dialog("open");
65});
66});
67
68/*Examples:6*/
69$("#mySubmit6").button({icons:{secondary:'ui-icon-clock'}}).click(function(){
70$.get("jsonRootActionCopy1",function(json){
71//显示获取的JSON
72$dialog.find("p").html(json);
73$dialog.dialog("open");
74},"txt");
75});
76});


5.目录结构
使用 Struts2 JSON plugin ( Struts2 + jQuery )

6.例示图(看着这样外观,比ExtJS可简洁多啦.)
使用 Struts2 JSON plugin ( Struts2 + jQuery )


源码(eclipse可导入) 下载
MD5: cc697f5b4348e24d430071a38d5ed48a jsonPlugin.tar.gz

SHA1: 1109c794d420e676caa63a1b366b885e8f1bdb9b jsonPlugin.tar.gz


原文:http://www.blogjava.net/xiangjava/archive/2010/07/14/326030.html


相关文章: