注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云之南

风声,雨声,读书声,声声入耳;家事,国事,天下事,事事关心

 
 
 

日志

 
 
关于我

专业背景:计算机科学 研究方向与兴趣: JavaEE-Web软件开发, 生物信息学, 数据挖掘与机器学习, 智能信息系统 目前工作: 基因组, 转录组, NGS高通量数据分析, 生物数据挖掘, 植物系统发育和比较进化基因组学

网易考拉推荐

struts2 json jquery 集成应用详解  

2010-06-04 11:30:50|  分类: java-j2ee |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.sunxin.org/forum/thread/21481.html

Struts2下使用jsonpluginjquery完成ajax功能
 

下载JSON插件的JAR包(新版本是0.32),并加到工程的相应目录下。从如下网址[url]http://docs.jquery.com/Downloading_jQuery[/url]下载jquery所需文件。(建议下载稳定版本,不然会出现莫名其妙的错误)

2.      配置相应的xml文件,为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>
 

配置有两处与通常的action配置不同,一处是扩展了json-default json-default”是在jsonplugin-0.30.jar包里的struts-plugin.xml中定义的,文件内容如下:

 

Java代码

1.   
2.  
3.   
4.<STRUTS><BR>    <PACKAGE name="json-default" extends="struts-default"><BR>        <RESULT-TYPES><BR>            <RESULT-TYPE class=com.googlecode.jsonplugin.JSONResult name="json"><BR>        </RESULT-TYPE><BR>        <INTERCEPTORS><BR>            <INTERCEPTOR class=com.googlecode.jsonplugin.JSONInterceptor name="json"><BR>        </INTERCEPTOR><BR>    </INTERCEPTORS><BR></RESULT-TYPES></PACKAGE></STRUTS>


 
 

另一处是定义了返回类型为json<result type="json" />,会将response中的返回数据转化为json对象。

 

3.在Action中的定义。定义返回对象,并添加getset方法。返回的数据可以根据需要格式成json形式(json格式如{1:test,2:test}),比如为二级列表提供填充内容的的数据,在页面需要进行遍历,做成json形式的,在页面遍历时也会比较方便。Action代码(部分)如下:

 

   

    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页面操作。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相同会使用缓存中的数据,如果不想使用缓存,可以在参数中加入一个随机数。

 
jQuery.each(obj,callback)
通用例遍方法,可用于例遍对象和数组
参数
object (Object) : 需要例遍的对象或数组。
callback (Function) : (可选) 每个成员/元素执行的回调函数。
回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。
 

Jquery操作下拉列表添加选项的方法为: $(“# categoryId”)[0].options.add(option);

 
 

页面代码如下(部分):
Java代码

01.<. language="." type="text/." src="/.s/jquery-1.2.2
02..js"><!--.-->
03.<. language=".">
04.       function fillChannel(id){
05.              var url = "/book/getAjaxBookChannelList.action";
06.              $.getJSON(url,{ran:Math.random()},function(json){
07.                     if(json.strAjaxChannel.length > 0){
08.                            var obj = .('(' + json.strAjaxChannel + ')');
09.                            $.each(obj,function(i,n){
10.                          option = new Option(n,i);
11.                          if(i==id)option.selected=true;
12.                         document.getElementById("channellistId").options.add(option);
13.                      });
14.                      option = new Option("全部频道",999);
15.                      if(id == 999)option.selected=true;
16.                      document.getElementById("channellistId").options.add(option); 
17.                  }
18.               else{
19.                           option = new Option("暂无频道");
20.                           document.getElementById("channellistId").options.add(option);
21.                  }
22.                     }
23.              );    
24.       }
25.       function fillCategory(chid,bid){
26.              document.getElementById("categoryId").options.length=1;
27.              var url = "/book/getAjaxBookCategoryListByChannelID.action";
28.              var cid = 0;
29.              if(chid > 0){
30.                     cid = chid;
31.              }
32.              else{
33.                     cid = document.getElementById("channellistId").value;
34.              }
35.              $.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
36.        //参数为频道ID及随机数,function(json)为回调函数,其中json为取到的返回数据
37.                       if(json.strAjaxCategory.length > 0){
38.                                   var obj = .('(' + json.strAjaxCategory + ')');//将json文本转化为json对象,以便于遍历
39.                                   $.each(obj,function(i,n){  //jquery中的遍历方法,
40.                                 option = new Option(n,i);
41.                                 if(i==bid)option.selected=true;
42.                                document.getElementById("categoryId").options.add(option);
43.                             });
44.                                  option = new Option("全部分类","-3");
45.                                  if(bid ==-3)option.selected=true;
46.                                  document.getElementById("categoryId").options.add(option);
47.                                  //jquery的方法为:$(“# categoryId”)[0].options.add(option);
48.                  }
49.                  else{
50.                           if(cid == 999){
51.                                  option = new Option("全部分类","-1");
52.                                  document.getElementById("categoryId").options.add(option);                              
53.                           }
54.                           else{
55.                                  option = new Option("暂无分类");
56.                                  document.getElementById("categoryId").options.add(option);
57.                           }
58.                  }
59.                     }
60.              );           
61.       }
62.   
63.       function fillSelect(chid,cid){
64.              fillChannel(chid);
65.              fillCategory(chid,cid);
66.       }
67.<!--.-->
68.<S:IF test="bookCategory.bookchannelId >0">onLoad="fillSelect(<S:PROPERTY value="bookCategory.bookchannelId">,<S:PROPERTY value="bookCategory.id">);"</S:PROPERTY><S:IF test="bookCategory==null">onLoad="fillChannel(0);"</S:IF>><BR> <BR>作品类别<BR>         <SELECT id=channellistId onchange="fillCategory(<s:if test=" name=channellistId bookcategory.bookchannelid=""></SELECT></S:PROPERTY><S:PROPERTY value="categoryId">);">选择频道<BR>         <SELECT id=categoryId name=categoryId><OPTION selected>选择分类</OPTION></SELECT></S:PROPERTY></S:IF>

 


 
 
 

得到如下内容:

Java代码
1.{"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}


  评论这张
 
阅读(1560)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016