struts2 json jquery 集成详解

Struts2 下使用 jsonplugin 及 jquery 完成 ajax 功能

 

1.      从 以下网址 [url]http://code.google.com/p/jsonplugin/downloads/list[/url] 下载 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 中定义的，文件内容如下：

<?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) {

           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);

 

页面代码如下（部分）：

<. 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>>

 

作品类别

         < 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 >

 

 

直接访问 [url]http://manager.17k.com/book/getAjaxBookChannelList.action[/url]

得到如下内容：

{"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-09 T10:23:36","id":1,"name":" 畅销经典 ","prefix":"changxiao","status":0},{"createdate":" 2008-07-09 T10:24:03","id":2,"name":" 玄幻奇幻 ","prefix":"yy","status":0},{"createdate":" 2008-07-09 T10:24:25","id":3,"name":" 都市娱乐 ","prefix":"dushi","status":0},{"createdate":" 2008-07-09 T10:24:38","id":4,"name":" 历史军事 ","prefix":"ss","status":0},{"createdate":" 2008-07-09 T10:24:54","id":5,"name":" 女性时尚 ","prefix":"nvxing","status":0},{"createdate":" 2008-07-09 T10:25:11","id":6,"name":" 游戏竞技 ","prefix":"dongman","status":0},{"createdate":" 2008-07-09 T10:25:24","id":7,"name":" 恐怖灵异 ","prefix":"kongbu","status":0},{"createdate":" 2008-07-09 T10:25:35","id":8,"name":" 文化社科 ","prefix":"www","status":0},{"createdate":" 2008-07-09 T10: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 的使用，我也不太熟悉，大家一起学习吧。

 

 

参考资料：

 

Struts 2 与 AJAX

[url]http://hi.baidu.com/clking419/blog/item/503abb18079b250535fa41b5.html[/url]