刚刚看了一下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")
3 public String getName() {
4 return name;
5 }
6
7 // 不序列化(不发给前台)
8 @JSON(serialize = false)
9 public boolean isSex() {
10 return sex;
11 }
12
13 // 指定日期格式
14 @JSON(format = "yyyy-MM-dd")
15 public Date getDate() {
16 return date;
17 }
18
19 // 这个有点难理解目前我不知道有什么作用,从单词的角度来看意思是反序列化=false,望高手解答
20 @JSON(deserialize = false)
21 public int getAge() {
22 return age;
23 }
2.xml配置方式
1 <!-- 想使用json-plugin就得继承 -->
2 <package name="study" extends="json-default">
3 <global-results>
4 <!-- 此包类的Action类没指result属性的就全使用此属性 -->
5 <result type="json"/>
6 </global-results>
7
8 <!-- Examples:1 -->
9 <action name="jsonAction" class="alex.study.jsonplugin.JsonAction"/>
10
11 <!-- Examples:2 -->
12 <action name="jsonAnnotationAction" class="alex.study.jsonplugin.JsonAnnotationAction"/>
13
14 <!-- Examples:3 -->
15 <action name="jsonExcludingAction" class="alex.study.jsonplugin.JsonExcludingAction">
16 <result type="json">
17 <!-- 序例化不包含以下匹配的属性 -->
18 <param name="excludeProperties">
19 password,
20 map.text,
21 map.*
22 </param>
23 </result>
24 </action>
25
26 <!-- Examples:4 -->
27 <action name="jsonIncludingAction" class="alex.study.jsonplugin.JsonIncludingAction">
28 <result type="json">
29 <!-- 序例化只包含以下正则表达式匹配的属性 -->
30 <param name="includeProperties">
31 ^password,
32 ^map\.\w+
33 </param>
34 </result>
35 </action>
36
37 <!-- Examples:5 -->
38 <action name="jsonRootAction" class="alex.study.jsonplugin.JsonRootAction">
39 <result type="json">
40 <!-- 指定jsonArray属性为json的根元素 -->
41 <param name="root">
42 jsonArray
43 </param>
44 </result>
45 </action>
46
47 <!-- Examples:6 -->
48 <action name="jsonRootActionCopy1" class="alex.study.jsonplugin.JsonRootAction">
49 <result type="json">
50 <param name="root">
51 jsonArray[1]
52 </param>
53
54 <!-- 包装JSON
55 <param name="wrapPrefix">/*</param>
56 <param name="wrapSuffix">*/</param>
57
58 这样在前台的javascript得拆包装
59 var responseObject = eval("("+data.substring(data.indexOf("\/\*")+2, data.lastIndexOf("\*\/"))+")");
60 -->
61
62 <!-- 如果该参数的前缀设置为true，将生成的JSON的前缀"{}&&“。这将有助于防止劫持 -->
63 <param name="prefix">true</param>
64
65 <!-- 开启 gzip 压缩 -->
66 <param name="enableGZIP">true</param>
67
68 <!-- 不缓存 -->
69 <param name="noCache">true</param>
70
71 <!-- 如果有属性值为空,则不发送此属性 -->
72 <param name="excludeNullProperties">true</param>
73
74 <!-- 指定个状态码 -->
75 <param name="statusCode">４04</param>
76
77 <!-- 设置上下文头信息 -->
78 <param name="contentType">text/html</param>
79
80 </result>
81 </action>
82 </package>
3.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>User Struts2 JSON Plugin</title>
6 <!-- import jQuery UI -->
7 <link rel="stylesheet" type="text/css" href="jquery/css/redmond/jquery-ui-1.8.2.custom.css"/>
8 <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
9 <script type="text/javascript" src="jquery/jquery-ui-1.8.2.custom.min.js"></script>
10 <script type="text/javascript" src="jquery/jquery.ui.datepicker-zh-CN.js"></script>
11
12 <!-- import the project -->
13 <link rel="stylesheet" type="text/css" href="css/default.css"/>
14 <script type="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 <div class="box">
21 <h3>Examples:1</h3>
22 <h5>获取jsonAction JSON</h5>
23 <button class="but" id="mySubmit1">获取</button>
24 </div>
25 </li>
26
27 <li>
28 <div class="box">
29 <h3>Examples:2</h3>
30 <h5>注解方式配置json</h5>
31 <label for="name">昵称: </label><input type="text" name="name" id="name" value="testName"/><br />
32 <label for="age">年龄: </label><input type="text" name="age" id="age" value="18"/><br />
33 <label for="sex">姓别: </label><input type="text" name="sex" id="sex" value="true"/><br />
34 <label for="date">生日: </label><input type="text" name="date" id="date"/><br />
35 <button type="button" class="but" id="mySubmit2">submit</button>
36 </div>
37 </li>
38
39 <li>
40 <div class="box">
41 <h3>Examples:3</h3>
42 <h5>Exclude Properties 方式配置json</h5>
43 <label for="username">用户名: </label><input type="text" name="username" id="username" value="usernamevalue"/><br />
44 <label for="password">密 码: </label><input type="password" name="password" id="password" value="12345678value"/><br />
45 <button type="button" class="but" id="mySubmit3">submit</button>
46 </div>
47 </li>
48 <li>
49 <div class="box">
50 <h3>Examples:4</h3>
51 <h5>Including properties 方式配置json</h5>
52 <label for="username1">用户名: </label><input type="text" name="username1" id="username1" value="usernamevalue"/><br />
53 <label for="password1">密 码: </label><input type="password" name="password1" id="password1" value="12345678value"/><br />
54 <button type="button" class="but" id="mySubmit4">submit</button>
55 </div>
56 </li>
57 <li>
58 <div class="box">
59 <h3>Examples:5</h3>
60 <h5>指定 哪个属性为 Root 方式配置json</h5>
61 <button type="button" class="but" id="mySubmit5">submit</button>
62 </div>
63 </li>
64
65 <li>
66 <div class="box">
67 <h3>Examples:6</h3>
68 <h5>其它配置</h5>
69 <button type="button" class="but" id="mySubmit6">submit</button>
70 </div>
71 </li>
72
73 </ul>
74 <div id="dialog" title="温馨提示">
75 <p>这是一个提示窗体</p>
76 </div>
77 </body>
78 </html>
4.default.js (jQuery)
1 $(document).ready(function(){
2
3 /*ID为dialog 元素 包装成 UI 对话框, 属性: 不自动打开, 打开时其它项禁用, 显示/隐藏 时指定的动画效果*/
4 var $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(){
18 var sendJson = {
19 name: $("#name").val(),
20 age: $("#age").val(),
21 sex: $("#sex").val(),
22 date: $("#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(){
35 var sendJson = {
36 username: $("#username").val(),
37 password: $("#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(){
48 var sendJson = {
49 username: $("#username1").val(),
50 password: $("#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.目录结构
6.例示图(看着这样外观,比ExtJS可简洁多啦.)
源码(eclipse可导入)
下载MD5: cc697f5b4348e24d430071a38d5ed48a jsonPlugin.tar.gz
SHA1: 1109c794d420e676caa63a1b366b885e8f1bdb9b jsonPlugin.tar.gz