使用 Struts2 JSON plugin ( Struts2 + jQuery )

刚刚看了一下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" > 昵称: &nbsp;&nbsp; </ label >< input  type ="text"  name ="name"  id ="name"  value ="testName" />< br  />
32                   < label  for ="age" > 年龄: &nbsp;&nbsp; </ label >< input  type ="text"  name ="age"  id ="age"  value ="18" />< br  />
33                   < label  for ="sex" > 姓别: &nbsp;&nbsp; </ label >< input  type ="text"  name ="sex"  id ="sex"  value ="true" />< br  />
34                   < label  for ="date" > 生日: &nbsp;&nbsp; </ 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" > 用户名: &nbsp;&nbsp; </ label >< input  type ="text"  name ="username"  id ="username"  value ="usernamevalue" />< br  />
44                   < label  for ="password" > 密 &nbsp;&nbsp;&nbsp; 码: &nbsp;&nbsp; </ 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" > 用户名: &nbsp;&nbsp; </ label >< input  type ="text"  name ="username1"  id ="username1"  value ="usernamevalue" />< br  />
53                   < label  for ="password1" > 密 &nbsp;&nbsp;&nbsp; 码: &nbsp;&nbsp; </ 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

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