Alex刺客

Dancing fingers, damage world. -- 舞动手指,破坏世界.

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  57 随笔 :: 0 文章 :: 76 评论 :: 0 Trackbacks
刚刚看了一下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">404</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.目录结构
图1

6.例示图(看着这样外观,比ExtJS可简洁多啦.)
图2


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


posted on 2010-07-13 10:32 Alex刺客 阅读(5082) 评论(2)  编辑  收藏 所属分类: Struts2 Study Notes

评论

# re: 使用 Struts2 JSON plugin ( Struts2 + jQuery ) Study_Notes 2014-05-22 17:30 kill
大哥,你的下载链接不能用了。能共享下源码嘛?
To:
liushaohan@126.com

TKS  回复  更多评论
  

# re: 使用 Struts2 JSON plugin ( Struts2 + jQuery ) Study_Notes 2014-05-22 17:31 kill

email地址写错了~~
是:

liushaohan01@126.com  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: