]]>
struts2 json jquery 闆嗘垚璇﹁В 鏂囩珷鍒嗙被:Web鍓嶇
1. 浠庝互涓嬬綉鍧http://code.google.com/p/jsonplugin/downloads/list涓嬭澆JSON鎻掍歡鐨凧AR鍖咃紙鏂扮増鏈槸0.32錛夛紝騫跺姞鍒板伐紼嬬殑鐩稿簲鐩綍涓嬨備粠濡備笅緗戝潃http://docs.jquery.com/Downloading_jQuery涓嬭澆jquery鎵闇鏂囦歡銆?寤鴻涓嬭澆紼沖畾鐗堟湰錛屼笉鐒朵細鍑虹幇鑾悕鍏跺鐨勯敊璇?
2. 閰嶇疆鐩稿簲鐨剎ml鏂囦歡錛屼負ajax璇鋒眰鎻愪緵鏁版嵁錛?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="sajax" extends="json-default" namespace="/book">
<action name="getAjaxBookChannelList" method="getAjaxBookChannelList" class="bookChannelAction">
<result type="json" />
</action>
<action name="getAjaxBookCategoryListByChannelID" method="getAjaxBookCategoryListByChannelID" class="bookChannelAction">
<result type="json" />
</action>
</package>
</struts>
閰嶇疆鏈変袱澶勪笌閫氬父鐨刟ction閰嶇疆涓嶅悓錛屼竴澶勬槸鎵╁睍浜唈son-default錛?json-default”鏄湪jsonplugin-0.30.jar鍖呴噷鐨剆truts-plugin.xml涓畾涔夌殑錛屾枃浠跺唴瀹瑰涓嬶細
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
</interceptors>
</package>
</struts>
鍙︿竴澶勬槸瀹氫箟浜嗚繑鍥炵被鍨嬩負json<result type="json" />錛屼細灝唕esponse涓殑榪斿洖鏁版嵁杞寲涓簀son瀵硅薄銆?
3錛庡湪Action涓殑瀹氫箟銆傚畾涔夎繑鍥炲璞★紝騫舵坊鍔爂et錛宻et鏂規(guī)硶銆傝繑鍥炵殑鏁版嵁鍙互鏍規(guī)嵁闇瑕佹牸寮忔垚json褰㈠紡(json鏍煎紡濡倇1:test,2:test})錛屾瘮濡備負浜岀駭鍒楄〃鎻愪緵濉厖鍐呭鐨勭殑鏁版嵁錛屽湪欏甸潰闇瑕佽繘琛岄亶鍘嗭紝鍋氭垚json褰㈠紡鐨勶紝鍦ㄩ〉闈㈤亶鍘嗘椂涔熶細姣旇緝鏂逛究銆侫ction浠ｇ爜錛堥儴鍒嗭級濡備笅錛?
public String getAjaxBookChannelList() {
StringBuffer sb = new StringBuffer();
bookChannelList = bookService.getBookChannelList();
if (bookChannelList.size() > 0) {
int j = bookChannelList.size();
sb.append("{");
for (int i = 0; i < j; i++) {
BookChannel bc = (BookChannel) bookChannelList.get(i);
sb.append(bc.getId());
sb.append(":");
sb.append("\"");
sb.append(bc.getName());
sb.append("\"");
if (i != (j - 1))
sb.append(",");
}
sb.append("}");
}
strAjaxChannel = sb.toString();//榪斿洖鐨勬暟鎹?
return Action.SUCCESS;
}
4欏甸潰鎿嶄綔銆侸query涓凡緇忔彁渚涘嚑渚沘jax璇鋒眰鐨勬柟娉曪紝濡傛灉榪斿洖鐨勬槸json瀵硅薄錛屼嬌鐢╦Query.getJSON(url,[data],[callback])浼氭瘮杈冩柟渚匡紝
jQuery.getJSON(url,[data],[callback]) 閫氳繃 HTTP GET 璇鋒眰杞藉叆 JSON 鏁版嵁銆?
榪斿洖鍊?
XMLHttpRequest
鍙傛暟
url (String) : 鍙戦佽姹傚湴鍧銆?
data (Map) : (鍙? 寰呭彂閫?Key/value 鍙傛暟銆?
callback (Function) : (鍙? 杞藉叆鎴愬姛鏃跺洖璋冨嚱鏁般?
鍙傛暟閮ㄥ垎錛屾祻瑙堝櫒鐨勭紦瀛樻槸浠rl涓烘爣璇嗙殑錛屽鏋渦rl鐩稿悓浼氫嬌鐢ㄧ紦瀛樹腑鐨勬暟鎹紝濡傛灉涓嶆兂浣跨敤緙撳瓨錛屽彲浠ュ湪鍙傛暟涓姞鍏ヤ竴涓殢鏈烘暟銆?
jQuery.each(obj,callback)
閫氱敤渚嬮亶鏂規(guī)硶錛屽彲鐢ㄤ簬渚嬮亶瀵硅薄鍜屾暟緇?
鍙傛暟
object (Object) : 闇瑕佷緥閬嶇殑瀵硅薄鎴栨暟緇勩?
callback (Function) : (鍙? 姣忎釜鎴愬憳/鍏冪礌鎵ц鐨勫洖璋冨嚱鏁般?
鍥炶皟鍑芥暟鎷ユ湁涓や釜鍙傛暟錛氱涓涓負瀵硅薄鐨勬垚鍛樻垨鏁扮粍鐨勭儲寮曪紝絎簩涓負瀵瑰簲鍙橀噺鎴栧唴瀹廣?
Jquery鎿嶄綔涓嬫媺鍒楄〃娣誨姞閫夐」鐨勬柟娉曚負: $(“# categoryId”)[0].options.add(option);
欏甸潰浠ｇ爜濡備笅錛堥儴鍒嗭級錛?
<. language="." type="text/." src="/.s/jquery-1.2.2.js"></.>
<. language=".">
function fillChannel(id){
var url = "/book/getAjaxBookChannelList.action";
$.getJSON(url,{ran:Math.random()},function(json){
if(json.strAjaxChannel.length > 0){
var obj = .('(' + json.strAjaxChannel + ')');
$.each(obj,function(i,n){
option = new Option(n,i);
if(i==id)option.selected=true;
document.getElementById("channellistId").options.add(option);
});
option = new Option("鍏ㄩ儴棰戦亾",999);
if(id == 999)option.selected=true;
document.getElementById("channellistId").options.add(option);
}
else{
option = new Option("鏆傛棤棰戦亾");
document.getElementById("channellistId").options.add(option);
}
}
);
}
function fillCategory(chid,bid){
document.getElementById("categoryId").options.length=1;
var url = "/book/getAjaxBookCategoryListByChannelID.action";
var cid = 0;
if(chid > 0){
cid = chid;
}
else{
cid = document.getElementById("channellistId").value;
}
$.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
//鍙傛暟涓洪閬揑D鍙婇殢鏈烘暟錛宖unction(json)涓哄洖璋冨嚱鏁幫紝鍏朵腑json涓哄彇鍒扮殑榪斿洖鏁版嵁
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//灝唈son鏂囨湰杞寲涓簀son瀵硅薄錛屼互渚夸簬閬嶅巻
$.each(obj,function(i,n){ //jquery涓殑閬嶅巻鏂規(guī)硶錛?
option = new Option(n,i);
if(i==bid)option.selected=true;
document.getElementById("categoryId").options.add(option);
});
option = new Option("鍏ㄩ儴鍒嗙被","-3");
if(bid ==-3)option.selected=true;
document.getElementById("categoryId").options.add(option);
//jquery鐨勬柟娉曚負:$(“# categoryId”)[0].options.add(option);
}
else{
if(cid == 999){
option = new Option("鍏ㄩ儴鍒嗙被","-1");
document.getElementById("categoryId").options.add(option);
}
else{
option = new Option("鏆傛棤鍒嗙被");
document.getElementById("categoryId").options.add(option);
}
}
}
);
}
function fillSelect(chid,cid){
fillChannel(chid);
fillCategory(chid,cid);
}
</.>
<body <s:if test="bookCategory.bookchannelId >0">onLoad="fillSelect(<s:property value="bookCategory.bookchannelId"/>,<s:property value="bookCategory.id"/>);"</s:if><s:if test="bookCategory==null">onLoad="fillChannel(0);"</s:if>>
浣滃搧綾誨埆
<select name="channellistId" id="channellistId" onChange="fillCategory(<s:if test="bookCategory.bookchannelId >0">0,</s:if><s:property value="categoryId"/>);"><option>閫夋嫨棰戦亾</option></select>
<select name="categoryId" id="categoryId"><option>閫夋嫨鍒嗙被</option></select>
鐩存帴璁塊棶http://manager.17k.com/book/getAjaxBookChannelList.action
寰楀埌濡備笅鍐呭錛?
{"ajaxBookCategoryListByChannelID":"success","ajaxBookChannelList":"success","bcID":0,"bchID":0,"bookCategory":null,"bookCategoryAllList":null,"bookCategoryByChannelID":"success","bookCategoryByID":null,"bookCategoryList":null,"bookCategoryListModel":null,"bookChannel":null,"bookChannelList":[{"createdate":"2008-07-09T10:23:36","id":1,"name":"鐣呴攢緇忓吀","prefix":"changxiao","status":0},{"createdate":"2008-07-09T10:24:03","id":2,"name":"鐜勫夠濂囧夠","prefix":"yy","status":0},{"createdate":"2008-07-09T10:24:25","id":3,"name":"閮藉競濞變箰","prefix":"dushi","status":0},{"createdate":"2008-07-09T10:24:38","id":4,"name":"鍘嗗彶鍐涗簨","prefix":"ss","status":0},{"createdate":"2008-07-09T10:24:54","id":5,"name":"濂蟲ф椂灝?,"prefix":"nvxing","status":0},{"createdate":"2008-07-09T10:25:11","id":6,"name":"娓告垙绔炴妧","prefix":"dongman","status":0},{"createdate":"2008-07-09T10:25:24","id":7,"name":"鎭愭栫伒寮?,"prefix":"kongbu","status":0},{"createdate":"2008-07-09T10:25:35","id":8,"name":"鏂囧寲紺劇","prefix":"www","status":0},{"createdate":"2008-07-09T10:25:46","id":9,"name":"緇忕鍔卞織","prefix":"www","status":0}],"channelID":0,"currentPage":0,"info":"","msg":"","pageSize":0,"srcID":0,"strAjax":"","strAjaxCategory":"","strAjaxChannel":"{1:\"鐣呴攢緇忓吀\",2:\"鐜勫夠濂囧夠\",3:\"閮藉競濞變箰\",4:\"鍘嗗彶鍐涗簨\",5:\"濂蟲ф椂灝歕",6:\"娓告垙绔炴妧\",7:\"鎭愭栫伒寮俓",8:\"鏂囧寲紺劇\",9:\"緇忕鍔卞織\"}","tarID":0,"theBookCategory":"success","theBookChannel":"success","toID":0}
鍏充簬jsonplugin搴忓垪鍖栫殑鍑犵偣錛?
a.瀵逛簬涓嶆兂琚簭鍒楀寲鐨勫睘鎬э紝鍙互鍦ㄤ粬鐨刧et鏂規(guī)硶鍓嶅姞娉ㄩ噴錛?nbsp; @JSON(serialize=false)
b.瀵逛簬鎯蟲敼鍙榡son緇撴灉灞炴у悕縐扮殑錛屽彲浠ュ湪浠栫殑get鏂規(guī)硶鍓嶅姞娉ㄩ噴@JSON(name="灞炴у悕")
c. 甯︽湁transient淇グ絎︿笌娌℃湁Getter鏂規(guī)硶鐨勫瓧孌碉紙field錛夐兘涓嶄細琚覆琛屽寲涓篔SON銆?
2. 閰嶇疆鐩稿簲鐨剎ml鏂囦歡錛屼負ajax璇鋒眰鎻愪緵鏁版嵁錛?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="sajax" extends="json-default" namespace="/book">
<action name="getAjaxBookChannelList" method="getAjaxBookChannelList" class="bookChannelAction">
<result type="json" />
</action>
<action name="getAjaxBookCategoryListByChannelID" method="getAjaxBookCategoryListByChannelID" class="bookChannelAction">
<result type="json" />
</action>
</package>
</struts>
閰嶇疆鏈変袱澶勪笌閫氬父鐨刟ction閰嶇疆涓嶅悓錛屼竴澶勬槸鎵╁睍浜唈son-default錛?json-default”鏄湪jsonplugin-0.30.jar鍖呴噷鐨剆truts-plugin.xml涓畾涔夌殑錛屾枃浠跺唴瀹瑰涓嬶細
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
</interceptors>
</package>
</struts>
鍙︿竴澶勬槸瀹氫箟浜嗚繑鍥炵被鍨嬩負json<result type="json" />錛屼細灝唕esponse涓殑榪斿洖鏁版嵁杞寲涓簀son瀵硅薄銆?
3錛庡湪Action涓殑瀹氫箟銆傚畾涔夎繑鍥炲璞★紝騫舵坊鍔爂et錛宻et鏂規(guī)硶銆傝繑鍥炵殑鏁版嵁鍙互鏍規(guī)嵁闇瑕佹牸寮忔垚json褰㈠紡(json鏍煎紡濡倇1:test,2:test})錛屾瘮濡備負浜岀駭鍒楄〃鎻愪緵濉厖鍐呭鐨勭殑鏁版嵁錛屽湪欏甸潰闇瑕佽繘琛岄亶鍘嗭紝鍋氭垚json褰㈠紡鐨勶紝鍦ㄩ〉闈㈤亶鍘嗘椂涔熶細姣旇緝鏂逛究銆侫ction浠ｇ爜錛堥儴鍒嗭級濡備笅錛?
public String getAjaxBookChannelList() {
StringBuffer sb = new StringBuffer();
bookChannelList = bookService.getBookChannelList();
if (bookChannelList.size() > 0) {
int j = bookChannelList.size();
sb.append("{");
for (int i = 0; i < j; i++) {
BookChannel bc = (BookChannel) bookChannelList.get(i);
sb.append(bc.getId());
sb.append(":");
sb.append("\"");
sb.append(bc.getName());
sb.append("\"");
if (i != (j - 1))
sb.append(",");
}
sb.append("}");
}
strAjaxChannel = sb.toString();//榪斿洖鐨勬暟鎹?
return Action.SUCCESS;
}
4欏甸潰鎿嶄綔銆侸query涓凡緇忔彁渚涘嚑渚沘jax璇鋒眰鐨勬柟娉曪紝濡傛灉榪斿洖鐨勬槸json瀵硅薄錛屼嬌鐢╦Query.getJSON(url,[data],[callback])浼氭瘮杈冩柟渚匡紝
jQuery.getJSON(url,[data],[callback]) 閫氳繃 HTTP GET 璇鋒眰杞藉叆 JSON 鏁版嵁銆?
榪斿洖鍊?
XMLHttpRequest
鍙傛暟
url (String) : 鍙戦佽姹傚湴鍧銆?
data (Map) : (鍙? 寰呭彂閫?Key/value 鍙傛暟銆?
callback (Function) : (鍙? 杞藉叆鎴愬姛鏃跺洖璋冨嚱鏁般?
鍙傛暟閮ㄥ垎錛屾祻瑙堝櫒鐨勭紦瀛樻槸浠rl涓烘爣璇嗙殑錛屽鏋渦rl鐩稿悓浼氫嬌鐢ㄧ紦瀛樹腑鐨勬暟鎹紝濡傛灉涓嶆兂浣跨敤緙撳瓨錛屽彲浠ュ湪鍙傛暟涓姞鍏ヤ竴涓殢鏈烘暟銆?
jQuery.each(obj,callback)
閫氱敤渚嬮亶鏂規(guī)硶錛屽彲鐢ㄤ簬渚嬮亶瀵硅薄鍜屾暟緇?
鍙傛暟
object (Object) : 闇瑕佷緥閬嶇殑瀵硅薄鎴栨暟緇勩?
callback (Function) : (鍙? 姣忎釜鎴愬憳/鍏冪礌鎵ц鐨勫洖璋冨嚱鏁般?
鍥炶皟鍑芥暟鎷ユ湁涓や釜鍙傛暟錛氱涓涓負瀵硅薄鐨勬垚鍛樻垨鏁扮粍鐨勭儲寮曪紝絎簩涓負瀵瑰簲鍙橀噺鎴栧唴瀹廣?
Jquery鎿嶄綔涓嬫媺鍒楄〃娣誨姞閫夐」鐨勬柟娉曚負: $(“# categoryId”)[0].options.add(option);
欏甸潰浠ｇ爜濡備笅錛堥儴鍒嗭級錛?
<. language="." type="text/." src="/.s/jquery-1.2.2.js"></.>
<. language=".">
function fillChannel(id){
var url = "/book/getAjaxBookChannelList.action";
$.getJSON(url,{ran:Math.random()},function(json){
if(json.strAjaxChannel.length > 0){
var obj = .('(' + json.strAjaxChannel + ')');
$.each(obj,function(i,n){
option = new Option(n,i);
if(i==id)option.selected=true;
document.getElementById("channellistId").options.add(option);
});
option = new Option("鍏ㄩ儴棰戦亾",999);
if(id == 999)option.selected=true;
document.getElementById("channellistId").options.add(option);
}
else{
option = new Option("鏆傛棤棰戦亾");
document.getElementById("channellistId").options.add(option);
}
}
);
}
function fillCategory(chid,bid){
document.getElementById("categoryId").options.length=1;
var url = "/book/getAjaxBookCategoryListByChannelID.action";
var cid = 0;
if(chid > 0){
cid = chid;
}
else{
cid = document.getElementById("channellistId").value;
}
$.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
//鍙傛暟涓洪閬揑D鍙婇殢鏈烘暟錛宖unction(json)涓哄洖璋冨嚱鏁幫紝鍏朵腑json涓哄彇鍒扮殑榪斿洖鏁版嵁
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//灝唈son鏂囨湰杞寲涓簀son瀵硅薄錛屼互渚夸簬閬嶅巻
$.each(obj,function(i,n){ //jquery涓殑閬嶅巻鏂規(guī)硶錛?
option = new Option(n,i);
if(i==bid)option.selected=true;
document.getElementById("categoryId").options.add(option);
});
option = new Option("鍏ㄩ儴鍒嗙被","-3");
if(bid ==-3)option.selected=true;
document.getElementById("categoryId").options.add(option);
//jquery鐨勬柟娉曚負:$(“# categoryId”)[0].options.add(option);
}
else{
if(cid == 999){
option = new Option("鍏ㄩ儴鍒嗙被","-1");
document.getElementById("categoryId").options.add(option);
}
else{
option = new Option("鏆傛棤鍒嗙被");
document.getElementById("categoryId").options.add(option);
}
}
}
);
}
function fillSelect(chid,cid){
fillChannel(chid);
fillCategory(chid,cid);
}
</.>
<body <s:if test="bookCategory.bookchannelId >0">onLoad="fillSelect(<s:property value="bookCategory.bookchannelId"/>,<s:property value="bookCategory.id"/>);"</s:if><s:if test="bookCategory==null">onLoad="fillChannel(0);"</s:if>>
浣滃搧綾誨埆
<select name="channellistId" id="channellistId" onChange="fillCategory(<s:if test="bookCategory.bookchannelId >0">0,</s:if><s:property value="categoryId"/>);"><option>閫夋嫨棰戦亾</option></select>
<select name="categoryId" id="categoryId"><option>閫夋嫨鍒嗙被</option></select>
鐩存帴璁塊棶http://manager.17k.com/book/getAjaxBookChannelList.action
寰楀埌濡備笅鍐呭錛?
{"ajaxBookCategoryListByChannelID":"success","ajaxBookChannelList":"success","bcID":0,"bchID":0,"bookCategory":null,"bookCategoryAllList":null,"bookCategoryByChannelID":"success","bookCategoryByID":null,"bookCategoryList":null,"bookCategoryListModel":null,"bookChannel":null,"bookChannelList":[{"createdate":"2008-07-09T10:23:36","id":1,"name":"鐣呴攢緇忓吀","prefix":"changxiao","status":0},{"createdate":"2008-07-09T10:24:03","id":2,"name":"鐜勫夠濂囧夠","prefix":"yy","status":0},{"createdate":"2008-07-09T10:24:25","id":3,"name":"閮藉競濞變箰","prefix":"dushi","status":0},{"createdate":"2008-07-09T10:24:38","id":4,"name":"鍘嗗彶鍐涗簨","prefix":"ss","status":0},{"createdate":"2008-07-09T10:24:54","id":5,"name":"濂蟲ф椂灝?,"prefix":"nvxing","status":0},{"createdate":"2008-07-09T10:25:11","id":6,"name":"娓告垙绔炴妧","prefix":"dongman","status":0},{"createdate":"2008-07-09T10:25:24","id":7,"name":"鎭愭栫伒寮?,"prefix":"kongbu","status":0},{"createdate":"2008-07-09T10:25:35","id":8,"name":"鏂囧寲紺劇","prefix":"www","status":0},{"createdate":"2008-07-09T10:25:46","id":9,"name":"緇忕鍔卞織","prefix":"www","status":0}],"channelID":0,"currentPage":0,"info":"","msg":"","pageSize":0,"srcID":0,"strAjax":"","strAjaxCategory":"","strAjaxChannel":"{1:\"鐣呴攢緇忓吀\",2:\"鐜勫夠濂囧夠\",3:\"閮藉競濞變箰\",4:\"鍘嗗彶鍐涗簨\",5:\"濂蟲ф椂灝歕",6:\"娓告垙绔炴妧\",7:\"鎭愭栫伒寮俓",8:\"鏂囧寲紺劇\",9:\"緇忕鍔卞織\"}","tarID":0,"theBookCategory":"success","theBookChannel":"success","toID":0}
鍏充簬jsonplugin搴忓垪鍖栫殑鍑犵偣錛?
a.瀵逛簬涓嶆兂琚簭鍒楀寲鐨勫睘鎬э紝鍙互鍦ㄤ粬鐨刧et鏂規(guī)硶鍓嶅姞娉ㄩ噴錛?nbsp; @JSON(serialize=false)
b.瀵逛簬鎯蟲敼鍙榡son緇撴灉灞炴у悕縐扮殑錛屽彲浠ュ湪浠栫殑get鏂規(guī)硶鍓嶅姞娉ㄩ噴@JSON(name="灞炴у悕")
c. 甯︽湁transient淇グ絎︿笌娌℃湁Getter鏂規(guī)硶鐨勫瓧孌碉紙field錛夐兘涓嶄細琚覆琛屽寲涓篔SON銆?
]]>