使用 Struts2 JSON plugin ( Struts2 + jQuery ) Study_Notes
刚刚看了一下struts2/docs/json-plugin.html文档,正好前几天研究一下jQuery的API今天就试着练练jQuery做个 Study_Notes.
IDE: eclipse-jee-galileo-SR2-linux-gtk
例子完整的源代码,日志最下面有下载.
1.注解方式
2.xml配置方式
3.html
4.default.js (jQuery)
5.目录结构
6.例示图(看着这样外观,比ExtJS可简洁多啦.)
源码(eclipse可导入) 下载
MD5: cc697f5b4348e24d430071a38d5ed48a jsonPlugin.tar.gz
SHA1: 1109c794d420e676caa63a1b366b885e8f1bdb9b jsonPlugin.tar.gz
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 @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 >
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 >
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 });
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