Struts2下使用jsonplugin及jquery完成ajax功能
2013-01-11 20:14
691 查看
[align=center] [/align]
1. 从以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包(新版本是0.32),并加到工程的相应目录下。从如下网址http://docs.jquery.com/Downloading_jQuery下载jquery所需文件。(建议下载稳定版本,不然会出现莫名其妙的错误)
2. 配置相应的xml文件,为ajax请求提供数据:
[align=left]<?xmlversion="1.0"encoding="UTF-8"?>[/align]
<!DOCTYPEstruts
PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
[align=left]<struts>[/align]
<packagename="sajax"extends="json-default"namespace="/book">
<actionname="getAjaxBookChannelList"method="getAjaxBookChannelList"class="bookChannelAction">
[align=left] <result type="json" />[/align]
</action>
<actionname="getAjaxBookCategoryListByChannelID"method="getAjaxBookCategoryListByChannelID"class="bookChannelAction">
[align=left] <resulttype="json"/>[/align]
</action>
</package>
</struts>
配置有两处与通常的action配置不同,一处是扩展了json-default,
json-default”是在jsonplugin-0.30.jar包里的struts-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" />,会将response中的返回数据转化为json对象。
3.在Action中的定义。定义返回对象,并添加get,set方法。返回的数据可以根据需要格式成json形式(json格式如{1:test,2:test}),比如为二级列表提供填充内容的的数据,在页面需要进行遍历,做成json形式的,在页面遍历时也会比较方便。Action代码(部分)如下:
public String getAjaxBookChannelList() {
StringBuffer sb = new StringBuffer();
bookChannelList =bookService.getBookChannelList();
if (bookChannelList.size()
> 0) {
[align=left] int j =bookChannelList.size();[/align]
[align=left] sb.append("{");[/align]
for (int
i = 0; i < j; i++) {
BookChannel bc = (BookChannel)
bookChannelList.get(i);
[align=left] sb.append(bc.getId());[/align]
[align=left] sb.append(":");[/align]
[align=left] sb.append("\"");[/align]
[align=left] sb.append(bc.getName());[/align]
[align=left] sb.append("\"");[/align]
[align=left] if (i != (j - 1))[/align]
[align=left] sb.append(",");[/align]
[align=left] }[/align]
[align=left] sb.append("}");[/align]
}
[align=left] [/align]
strAjaxChannel = sb.toString();//返回的数据
[align=left] [/align]
return Action.SUCCESS;
}
4页面操作。Jquery中已经提供几供ajax请求的方法,如果返回的是json对象,使用jQuery.getJSON(url,[data],[callback])会比较方便,
jQuery.getJSON(url,[data],[callback])通过 HTTP GET
请求载入 JSON数据。
返回值
XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选)待发送 Key/value
参数。
callback (Function) : (可选)载入成功时回调函数。
参数部分,浏览器的缓存是以url为标识的,如果url相同会使用缓存中的数据,如果不想使用缓存,可以在参数中加入一个随机数。
[align=left]jQuery.each(obj,callback)[/align]
[align=left]通用例遍方法,可用于例遍对象和数组[/align]
[align=left]参数[/align]
[align=left]object (Object) : 需要例遍的对象或数组。[/align]
[align=left]callback (Function) : (可选) 每个成员/元素执行的回调函数。[/align]
[align=left]回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。[/align]
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){
//参数为频道ID及随机数,function(json)为回调函数,其中json为取到的返回数据
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//将json文本转化为json对象,以便于遍历
$.each(obj,function(i,n){ //jquery中的遍历方法,
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>>
[align=left]作品类别[/align]
<selectname="channellistId"id="channellistId"onChange="fillCategory(<s:iftest="bookCategory.bookchannelId
>0">0,</s:if><s:propertyvalue="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.对于不想被序列化的属性,可以在他的get方法前加注释: @JSON(serialize=false)
b.对于想改变json结果属性名称的,可以在他的get方法前加注释@JSON(name="属性名")
c. 带有transient修饰符与没有Getter方法的字段(field)都不会被串行化为JSON。
对于struts2下jsonplugin、jquery的使用,我也不太熟悉,大家一起学习吧。
1. 从以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包(新版本是0.32),并加到工程的相应目录下。从如下网址http://docs.jquery.com/Downloading_jQuery下载jquery所需文件。(建议下载稳定版本,不然会出现莫名其妙的错误)
2. 配置相应的xml文件,为ajax请求提供数据:
[align=left]<?xmlversion="1.0"encoding="UTF-8"?>[/align]
<!DOCTYPEstruts
PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
[align=left]<struts>[/align]
<packagename="sajax"extends="json-default"namespace="/book">
<actionname="getAjaxBookChannelList"method="getAjaxBookChannelList"class="bookChannelAction">
[align=left] <result type="json" />[/align]
</action>
<actionname="getAjaxBookCategoryListByChannelID"method="getAjaxBookCategoryListByChannelID"class="bookChannelAction">
[align=left] <resulttype="json"/>[/align]
</action>
</package>
</struts>
配置有两处与通常的action配置不同,一处是扩展了json-default,
json-default”是在jsonplugin-0.30.jar包里的struts-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" />,会将response中的返回数据转化为json对象。
3.在Action中的定义。定义返回对象,并添加get,set方法。返回的数据可以根据需要格式成json形式(json格式如{1:test,2:test}),比如为二级列表提供填充内容的的数据,在页面需要进行遍历,做成json形式的,在页面遍历时也会比较方便。Action代码(部分)如下:
public String getAjaxBookChannelList() {
StringBuffer sb = new StringBuffer();
bookChannelList =bookService.getBookChannelList();
if (bookChannelList.size()
> 0) {
[align=left] int j =bookChannelList.size();[/align]
[align=left] sb.append("{");[/align]
for (int
i = 0; i < j; i++) {
BookChannel bc = (BookChannel)
bookChannelList.get(i);
[align=left] sb.append(bc.getId());[/align]
[align=left] sb.append(":");[/align]
[align=left] sb.append("\"");[/align]
[align=left] sb.append(bc.getName());[/align]
[align=left] sb.append("\"");[/align]
[align=left] if (i != (j - 1))[/align]
[align=left] sb.append(",");[/align]
[align=left] }[/align]
[align=left] sb.append("}");[/align]
}
[align=left] [/align]
strAjaxChannel = sb.toString();//返回的数据
[align=left] [/align]
return Action.SUCCESS;
}
4页面操作。Jquery中已经提供几供ajax请求的方法,如果返回的是json对象,使用jQuery.getJSON(url,[data],[callback])会比较方便,
jQuery.getJSON(url,[data],[callback])通过 HTTP GET
请求载入 JSON数据。
返回值
XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选)待发送 Key/value
参数。
callback (Function) : (可选)载入成功时回调函数。
参数部分,浏览器的缓存是以url为标识的,如果url相同会使用缓存中的数据,如果不想使用缓存,可以在参数中加入一个随机数。
[align=left]jQuery.each(obj,callback)[/align]
[align=left]通用例遍方法,可用于例遍对象和数组[/align]
[align=left]参数[/align]
[align=left]object (Object) : 需要例遍的对象或数组。[/align]
[align=left]callback (Function) : (可选) 每个成员/元素执行的回调函数。[/align]
[align=left]回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。[/align]
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){
//参数为频道ID及随机数,function(json)为回调函数,其中json为取到的返回数据
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//将json文本转化为json对象,以便于遍历
$.each(obj,function(i,n){ //jquery中的遍历方法,
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>>
[align=left]作品类别[/align]
<selectname="channellistId"id="channellistId"onChange="fillCategory(<s:iftest="bookCategory.bookchannelId
>0">0,</s:if><s:propertyvalue="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.对于不想被序列化的属性,可以在他的get方法前加注释: @JSON(serialize=false)
b.对于想改变json结果属性名称的,可以在他的get方法前加注释@JSON(name="属性名")
c. 带有transient修饰符与没有Getter方法的字段(field)都不会被串行化为JSON。
对于struts2下jsonplugin、jquery的使用,我也不太熟悉,大家一起学习吧。
相关文章推荐
- Struts2下使用jsonplugin及jquery完成ajax功能
- 【Struts2】利用JQuery与struts2-json-plugin实现Struts2的Ajax功能并利用JSON传递数据
- J2EE下使用AJAX(五) jsonplugin -- struts2下的AJAX插件
- Struts2,Spring,Struts2 JSON-plugin,JQueryAJAX on GAE
- jQuery使用动态渲染表单功能完成ajax文件下载
- 下拉框自动完成(autocomplete)带有分页功能SutaraLumpur-jquery.ajaxComboBox.js的使用
- jQuery内置的AJAX功能和JSON的使用实例
- 下拉框自动完成(autocomplete)带有分页功能SutaraLumpur-jquery.ajaxComboBox.js的使用
- 使用jQuery的Ajax功能,完成轮询邮箱功能
- Struts2结合jquery使用Ajax传递Json数据
- Struts2 Ajax文件上传功能 使用Jquery.form插件
- J2EE下使用AJAX:jsonplugin -- struts2下的AJAX插件
- 【转】使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能
- Jquery、Json、Struts2、Spring实现Ajax动态功能以及注意事项
- struts2 + spring +jquery实现AJAX (使用了struts2 的json插件)
- 使用 Struts2 JSON plugin ( Struts2 + jQuery )
- jQuery内置的AJAX功能和JSON的使用实例
- Jquery autocomplete在struts2中的使用及体会(json plugin)
- jQuery使用动态渲染表单功能完成ajax文件下载
- struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)