`
liyuandong
  • 浏览: 331687 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

struts2 json jquery 集成详解

    博客分类:
  • JAVA
阅读更多
1.      从以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包(新版本是0.32),并加到工程的相应目录下。从如下网址http://docs.jquery.com/Downloading_jQuery下载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>


直接访问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_json_jquery_集成详解.docx

    Struts2、JSON和jQuery的集成是Web开发中常见的技术栈,主要目的是为了实现高效的前端交互和后端数据传输。以下是对这些知识点的详细说明: **Struts2** 是一个基于MVC(Model-View-Controller)设计模式的Java Web...

    AjaxStruts2Json实例

    **AjaxStruts2Json实例详解** 在Web开发中,用户界面的实时性和互动性变得越来越重要,这使得异步更新技术如Ajax(Asynchronous JavaScript and XML)被广泛应用。Ajax允许网页在不重新加载整个页面的情况下与...

    struts2的json插件配置详解(附示例strutsJson)

    在这个例子中,`/helloWorld.json`请求会被发送到服务器,Struts2框架会处理这个请求,返回JSON数据,然后jQuery会将接收到的JSON数据解析并显示在页面上。 关于源码方面,你可以查看`src`目录下的Java源代码和`...

    struts2+json+jquery实现ajax登录和注册功能

    ### Struts2、JSON与jQuery实现Ajax登录与注册功能详解 在现代Web开发中,实现高效、实时的用户交互已成为核心需求之一。Struts2框架以其强大的MVC架构能力,结合JSON数据交换标准以及jQuery库的灵活性,为构建动态...

    struts2.1.8 jquery json jax

    这个项目提供了一个完整的示例,展示了如何在Struts2中集成jQuery和JSON,实现AJAX登录验证。对于初学者或者开发者来说,这是一个很好的学习和参考资源,可以帮助理解Struts2、jQuery和AJAX的协同工作方式,以及如何...

    struts2~json~gson~jquery~ajax简单应用

    ### Struts2、JSON、Gson、jQuery与Ajax简单应用详解 #### 一、概述 在Web开发领域,Struts2、JSON、Gson、jQuery和Ajax是几个非常重要的技术,它们各自扮演着不同的角色,但又能够很好地协同工作来构建高效、交互...

    struts2 jquery插件

    在探讨Struts2与jQuery插件的结合时,我们深入分析了如何在Struts2框架中集成并利用jQuery插件来增强Web应用程序的交互性和用户体验。Struts2作为一个流行的Java Web开发框架,提供了一种灵活的方式来构建MVC架构的...

    Jquery与struts2

    **jQuery与Struts2整合详解** 在Web开发中,jQuery是一个强大的JavaScript库,它极大地简化了JavaScript的使用,使得前端交互更加便捷高效。而Struts2作为一款成熟的MVC框架,广泛应用于Java后端开发,提供了强大的...

    jquery与struts2整合

    【jQuery与Struts2整合详解】 在Web开发中,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理和Ajax交互。Struts2是一个流行的Java Web框架,用于构建MVC(Model-View-Controller)架构的...

    Struts2开发详解

    Struts2通过Struts2-jquery插件或JSON结果类型,支持异步更新,提供更丰富的用户体验。 总的来说,Struts2作为一个成熟的Java web框架,具有丰富的特性和良好的社区支持,为开发者提供了高效且灵活的开发工具,是...

    struts+jquery+json+ajax.pdf

    综上所述,这个例子展示了如何使用 Struts2 处理后端逻辑,通过 JSON 将数据传递给前端,然后利用 jQuery 和 AJAX 实现无刷新的交互体验。这种组合在现代 web 开发中非常常见,能够有效提升应用的性能和用户体验。

    Jquery+Struts2笔记

    **jQuery与Struts2整合应用详解** 在Web开发领域,jQuery和Struts2都是不可或缺的工具。jQuery是一款轻量级的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱,而Struts2作为Java企业级应用中的MVC框架,...

    struts2+ajax详解pdf清晰

    在《struts2+ajax详解》这本书中,你将深入学习这两种技术的结合使用,包括配置、Action编写、Ajax请求的处理以及如何在Struts2中返回JSON数据等内容。通过阅读13 struts2.0 & ajax(1).pdf和14 struts2.0 & ajax(2)....

    struts2.1.8.1+jquery1.4.2返回json数据.pdf

    ### Struts2.1.8.1与jQuery1.4.2实现JSON数据交互详解 在Web开发领域,Struts2框架因其强大的功能和灵活性而备受开发者青睐。结合jQuery库,能够实现前后端数据的高效交换,特别是通过JSON格式进行数据传输更是常见...

    程序天下struts2技术详解代码.rar

    9. **插件体系**:Struts2有一个丰富的插件库,如 strut2-dojo-plugin(提供Dojo库的支持),strut2-jquery-plugin(提供jQuery库的支持),strut2-json-plugin(支持JSON输出),使开发者能方便地集成各种前端库。...

Global site tag (gtag.js) - Google Analytics