剛剛看了一下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