jQuery json与Spring结合的问题

@JSON(serialize=false) 
json和Spring结合的时候 应该注意不应该 序列化 Spring中依赖注入的东西 jar包也应该struts2-json-plugin-2.2.1.1.jar json-lib-2.1-jdk15.jar ezmorph-1.0.3.jar
这里操作 防止json 将注入的bean 序列化。 或者在action 中配置 不被序列化的属性 <result type="json"><param
name="excludeProperties">JsonService</param></result>

struts2+spring+hibernate  js框架应用了Jquery 数据传输json
json与spring 的冲突 出现jsonwriter异常下面具体操作!用@JSON(serialize=false) 防止序列化
当struts2的action配置引入json 时,例如:
<package name="com.pdna.student.action.LessonAction_xl" extends="json-default">
<action name="jsontest" class="LessonAction_xl" method="jsontest">
<result type="json"></result>
</action>
</package>
此时引入json 插件 返回数据自动封为json数据,前台接受
fucntion jsontest(){
var url="jsontest.action";
//dt为返回数据
jQuery.post(url,function(dt){
//alert(dt)  //可以查看返回的 dt 格式
var tpy = eval('(' + dt+ ')');
})

}
action 中的方法
private List publist;
private JsonService jsonservice; //spring 注入的service

public String jsontest(){
try{
      publist=jsontestservice.jsontest()
      return SUCCESS;
}cacth(Exception ex){
ex.printStackTrace();
return ERROR;
}
}
//get -set 方法

//这里操作 防止json 将注入的bean 序列化。 或者在action 中配置 不被序列化的属性 <result type="json"><param
name="excludeProperties">JsonService</param></result>
@JSON(serialize=false)
public JsonService getJsonService() {
return jsonservice;
}
public void setJsonService(JsonService jsonservice) {
this.jsonservice = jsonservice;
}
public List getPublist() {
return publist;
}
public void setPublist(List publist) {
this.publist = publist;
}
service中的 操作方法不在这里写了


使用json 时候报
Positioned Update not supported 异常
出现此类异常 主要原因是在操作的 hibernate dao 类有 映射关系
由于jsonplugin并不区分类和动态生成的类,所以也会试图序列化hibernateLazyInitializer属性,从而导致出现上述的异常,
网上会找到很多的解决办法,我的解决方法
方法一:将 映射关系的延迟加载lazy="false";
方法二:hibernate 完全交给spring 管理
<filter>
<filter-name>hibernateFilter</filter-name>
<filter-class>
org.springframework.orm.hibernate3.support.OpenSessionInViewFilter
</filter-class>
<init-param>
<param-name>singleSession</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>hibernateFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>




















































http://huqilong.blog.51cto.com/53638/136802

  http://www.360doc.com/content/10/0731/19/117897_42788515.shtml









    1.JQuery的Ajax实现并与struts2的结合   
    2.配置过程:   
      a.新建web项目;   
      b.修改web.xml文件   
      c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar    
          commons-io.jar xwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),注意jar包支持   
          这六个包是struts必须依赖的jar包   
      d.配置jsp文件,在jsp里面添加jquery支持   
      e.配置action   
      f   ( 一)在struts2.1.6之前的版本:   
             添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点,因为json大量引用了 Apache commons的包,所以这里要一并加入,   
           需要的commons包共4个,除了commons的包外,还需要引入一个 ezmorph的包,所以这一步一共要引入7个包,列出如下:   
           commons-collections.jar commons-lang.jar   
           commons- beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个   
           (二)struts2.1.6,添加jsonplugin0.34或者jsonplugin0.7   
            (三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit- plugin   
              
              
    3.插件使用:    
        1.validation插件:详见table-validation.jsp,主要为引入一个jquery.validate.js,获取相应的属性名来进行验证;   
        2.tablesort插件:目前用的是兼容中文的官网版本,一是可以实现自动排序,二是支持中文;要注意在table当中的格式,这点很重要   
        3.tablesortpager插件   
           
           
           
     JQuery与Json结合的一些注意事项:   
     1.$.get(url,data,function(data){   
        eval(data);   
        })   
      eval(data)将数据转换为js对象;   
      实际上如果返回的json对象,可通过将参数直接命名为json即可,如下   
      $.get(url.data,function(data){},"json")   
      
    2.取json属性时,尽量用中括号方式,原因是如果有数字属性会发生不识别的现象   
      eg:var a=obj["31001"];   
         //obj.31001则可能出错   
       解决办法有其它方式:比如将属性值31001改为s31001   
          
     3.乱码问题:   
        在struts1.2中,通过设置表头的编码来解决乱码问题,注意对于xml和json,要分别设置为text/xml和text/json   
            eg:response.setContentType("text/json; charset=utf-8");   

 

1.struts.xml配置:

             
view plaincopy to clipboardprint?

    <?xml version="1.0" encoding="UTF-8"?>  
    <!-- 指定Struts 2配置文件的DTD信息 -->  
    <!DOCTYPE struts PUBLIC   
            "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
            "http://struts.apache.org/dtds/struts-2.0.dtd">  
    <struts>  
         <constant name="struts.i18n.encoding" value="utf-8"></constant>  
        <package name="S2SHJQuery" extends="json-default">  
            <action name="show" class="action.ShowAction">  
                <result type="json"/>  
            </action>  
        </package>  
    </struts>  

 

2.ShowAction.java配置 :

             
view plaincopy to clipboardprint?

    package action;   
      
    import java.util.ArrayList;   
    import java.util.List;   
    import java.util.Map;   
      
    import org.apache.struts2.json.annotations.JSON;   
      
    import com.opensymphony.xwork2.ActionSupport;   
    public class ShowAction extends ActionSupport {   
        private String testvalue;   
        private String result;   
        private List<String> list;   
        private List<User> userlist;   
        private User user;   
        private Map<String, User> map;   
        private String[] autoarray;   
        public String[] getAutoarray() {   
            return autoarray;   
        }   
        public void setAutoarray(String[] autoarray) {   
            this.autoarray = autoarray;   
        }   
        @JSON(serialize=false)   
        public Map<String, User> getMap() {   
            return map;   
        }   
        public void setMap(Map<String, User> map) {   
            this.map = map;   
        }   
        @JSON(serialize=false)   
        public User getUser() {   
            return user;   
        }   
        public void setUser(User user) {   
            this.user = user;   
        }   
        @JSON(serialize=false)   
        public List<User> getUserlist() {   
            return userlist;   
        }   
        public void setUserlist(List<User> userlist) {   
            this.userlist = userlist;   
        }   
        @JSON(serialize=false)   
        public List<String> getList() {   
            return list;   
        }   
        public void setList(List<String> list) {   
            this.list = list;   
        }   
           
        public void setTestvalue(String testvalue) {   
            this.testvalue = testvalue;   
        }   
        @JSON(serialize=false)   
        public String getTestvalue() {   
            return testvalue;   
        }   
        @JSON(serialize=false)   
        public String getResult() {   
            return result;   
        }   
        public void setResult(String result) {   
            this.result = result;   
        }   
        @Override  
        public String execute() throws Exception {   
            // TODO Auto-generated method stub   
            System.out.println("test is ok: "+testvalue);   
            //1.????string   
            /*int i=9;  
             //result=""+i+"";  
             result="中国";*/  
            //2.list?   
            /*list=new ArrayList<String>();  
            list.add("allen");  
            list.add("中国");  
            list.add("adc");*/  
            //3.list?а?User   
            /*userlist=new ArrayList<User>();  
            User user1=new User();  
            user1.setPassword(1);  
            user1.setUsername("username1");  
            User user2=new User();  
            user2.setPassword(2);  
            user2.setUsername("username2");  
            User user3=new User();  
            user3.setPassword(3);  
            user3.setUsername("username3");  
            userlist.add(user1);  
            userlist.add(user2);  
            userlist.add(user3);*/  
            //4.User???????   
            /*user=new User();  
            user.setPassword(1);  
            String username="中国";  
            user.setUsername(username);  
            System.out.println(user.getUsername());  
             */  
            //5.map????   
            /*map=new HashMap<String, User>();  
            User user1=new User();  
            user1.setPassword(1);  
            user1.setUsername("username1");  
            User user2=new User();  
            user2.setPassword(2);  
            user2.setUsername("username2");  
            User user3=new User();  
            user3.setPassword(3);  
            user3.setUsername("username3");  
            map.put("s1",user1 );  
            map.put("s2",user2 );  
            map.put("s3",user3 );*/  
            /*map=new HashMap<String, String>();//??????String,string???  
            map.put("s1","user1");  
            map.put("s2","user2");  
            map.put("s3","user3");*/  
            //7.直接传递数祖   
            autoarray=new String[3];   
            autoarray[0]="a";   
            autoarray[1]="b";   
            autoarray[2]="c";   
               
            return SUCCESS;   
        }   
      
           
    }  

 

3.show.jsp配置:

                    
view plaincopy to clipboardprint?

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
    <%   
    String path = request.getContextPath();   
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    %>   
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
    <html>   
      <head>   
      <mce:script type="text/jt" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>   
        <base href="<%=basePath%>">   
        <title>struts2+jquery+json</title>   
    <mce:script type="text/javascript"><!--   
        //1.struts2+jquery+json单独传递单个参数   
        /*$(function(){  
                $("#jquerytest").click(function(){  
                var params={testvalue:$('#test').val()};  
                    $.ajax({  
                            url:"show.action",  
                            data:params,  
                            type:'post',  
                            dataType:'json',  
                            success:function(data){  
                            //data += decodeURI(data.shtml) ;  
                                alert(" 成功");  
                                alert(data.result);  
                                },  
                            error:  function(){  
                                    alert(" 失败");  
                                }                     
                    })  
                })  
            })*/  
         //2.jquery单独传递含单个参数的list   
         /*$(function(){  
                $("#jquerytest").click(function(){  
                var params={testvalue:$('#test').val()};  
                    $.ajax({  
                            url:"show.action",  
                            data:params,  
                            type:'post',  
                            dataType:'json',  
                            success:function(data){  
                            var jsonobject=data.list;  
                                for(var j=0;j<jsonobject.length;j++)  
                                        {  
                                            alert(jsonobject[j]);  
                                        }  
                                },  
                            error:  function(){  
                                    alert(" 失败");  
                                }                     
                    })  
                })  
            })*/  
         //3.jquery单独传递含对象类型User的list   
         $(function(){   
                $("#jquerytest").click(function(){   
                var params={testvalue:$('#test').val()};   
                    $.ajax({   
                            url:"show.action",   
                            data:params,   
                            type:'post',   
                            dataType:'json',   
                            success:function(data){   
                            var jsonobject=data.userlist;   
                                /*for(var j=0;j<jsonobject.length;j++)  
                                        {  
                                            alert(jsonobject[j].username);  
                                            alert(jsonobject[j].password);  
                                        }  
                                */  
                                $.each(jsonobject,function(key,value){   
                                        alert(key+" "+value.username);   
                                        alert(key+" "+value.password);   
                                    })     
                                    }                  
                                    ,   
                            error:  function(){   
                                    alert("失败");   
                                }                      
                    })   
                })   
            })   
         //4.jquery单独传递User对象类型   
        /*$(function(){  
                $("#jquerytest").click(function(){  
                var params={testvalue:$('#test').val()};  
                    $.ajax({  
                            url:"show.action",  
                            data:params,  
                            type:'post',  
                            dataType:'json',  
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",  
                            success:function(data){  
                            var jsonobject=data.user;  
                                            alert(jsonobject.username);  
                                },  
                            error:  function(){  
                                    alert(" 失败");  
                                }                     
                    })  
                })  
            })*/  
         //5.jquery传递含User对象类型的map类型   
         /*$(function(){  
                $("#jquerytest").click(function(){  
                var params={testvalue:$('#test').val()};  
                    $.ajax({  
                            url:"show.action",  
                            data:params,  
                            type:'post',  
                            dataType:'json',  
                            success:function(data){  
                            var jsonobject=data.map;  
                                alert(data.map.s1.username);// 一步一步获取值  
                                $.each(data.map,function(key,value){  
                                        alert(key+": "+value.username);  
                                    })  
                                },  
                            error:  function(){  
                                    alert(" 失败");  
                                }                     
                    })  
                })  
            })*/  
    // --></mce:script>   
      </head>   
      <body>   
      <form>   
      <input type="button" value="JQuery"  id="jquerytest"><br>   
      <input type="text" value="美国" name="test" id="test">   
      </form>   
      </body>   
    </html>  

  

 

4.tableopen.jsp弹出层插件:

              
view plaincopy to clipboardprint?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
      
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Thickbox Plus - Download by http://www.codefans.net</title>  
      
    <mce:style type="text/css" media="all"><!--  
    @import "css/global.css";  
    --></mce:style><style type="text/css" media="all" mce_bogus="1">@import "css/global.css";</style>  
    <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>  
    <mce:script src="/S2SHJQuery/lib/thickbox_plus.js" mce_src="S2SHJQuery/lib/thickbox_plus.js" type="text/javascript"></mce:script>  
      
    </head>  
    <body>  
        <div id="contentPad">  
        <h1>Thickbox Plus</h1>  
        <div>  
            <a href="images/image1.jpg" mce_href="images/image1.jpg" title="Sample caption" class="thickbox"><img src="images/image1_t.jpg" mce_src="images/image1_t.jpg" alt="Image 1" /></a>  
                 
            <a href="images/image2.jpg" mce_href="images/image2.jpg" title="Another sample caption" class="thickbox"><img src="images/image2_t.jpg" mce_src="images/image2_t.jpg" alt="Image 2"/></a>  
        </div>  
        </div>  
    </body>  
    </html>  

 

5.tablesorter.jsp排序层插件:

             
view plaincopy to clipboardprint?

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    <%   
        String path = request.getContextPath();   
        String basePath = request.getScheme() + "://"   
                + request.getServerName() + ":" + request.getServerPort()   
                + path + "/";   
    %>  
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
        <head>  
            <base href="<%=basePath%>">  
      
            <title>列表排序</title>  
            <link rel="stylesheet" type="text/css" media="screen"  
                href="css/screen.css" />  
            <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"  
                type="text/javascript"></mce:script>  
            <mce:script  
                src="/S2SHJQuery/lib/jquery.tablesorter.js"  
                type="text/javascript"></mce:script>  
            <mce:script type="text/javascript"><!--   
            $(document).ready(function() {   
                    $("#userList").tablesorter({sortList:  [ [2,1]]} );//也可通过传递参数来实现   
                });    
           
    // --></mce:script>  
        </head>  
        <body>  
            This is my JSP page.   
            <br>  
            <table id="userList">  
        <thead>  
            <tr>  
                <th>Name</th>  
                <th>Sex</th>  
                <th>old</th>  
            </tr>  
        </thead>  
        <tbody>  
        <tr>  
                <td>李四</td>  
                <td>男</td>  
                <td>14</td>  
            </tr>  
            <tr>  
                <td>张三</td>  
                <td>男</td>  
                <td>50</td>  
            </tr>  
            <tr>  
                <td>赵五</td>  
                <td>Sex</td>  
                <td>60</td>  
            </tr>  
            <tr>  
                <td>丽丽</td>  
                <td>女</td>  
                <td>18</td>  
            </tr>  
            <tr>  
                <td>蝈蝈</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            </tbody>  
    </table>  
        </body>  
    </html>  

 

6.tablesortpager.jsp排序兼分页插件:

             
view plaincopy to clipboardprint?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery-1.2.6.pack.js" mce_src="S2SHJQuery/lib/jquery-1.2.6.pack.js"></mce:script>  
    <mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.js"></mce:script>  
    <mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.pager.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.pager.js"></mce:script>  
      
    <mce:script language="java script"><!--   
    $(document).ready(function(){   
        $("#userList").tablesorter({sortList: [ [2,1]]}).tablesorterPager({container: $("#pager")});      
    });   
    // --></mce:script>  
    <title>jquery.tablesorter实现table排序(含分页)</title>  
    </head>  
    <body>  
    <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" id="userList">  
                          <thead>  
                          <tr class="main-font2">    
                          <th>Name</th>  
                            <th>Sex</th>  
                            <th>old</th>  
                          </tr>  
      </thead>  
                            <tbody>  
                            
                         <tr>  
                <td>李四</td>  
                <td>男</td>  
                <td>14</td>  
            </tr>  
            <tr>  
                <td>张三</td>  
                <td>男</td>  
                <td>50</td>  
            </tr>  
            <tr>  
                <td>赵五</td>  
                <td>Sex</td>  
                <td>60</td>  
            </tr>  
            <tr>  
                <td>丽丽</td>  
                <td>女</td>  
                <td>18</td>  
            </tr>  
            <tr>  
                <td>蝈蝈</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行1</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行2</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行3</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行4</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行5</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行6</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
            <tr>  
                <td>飞行7</td>  
                <td>女</td>  
                <td>24</td>  
            </tr>  
                            </tbody>  
    </table>  
    <div id="pager" class="pager">  
                                    <form align="center">  
                                         每页记录数:   
                                        <select class="pagesize">  
                                            <option selected="selected" value="10">10</option>  
                                            <option value="15">15</option>  
                                            <option value="20">20</option>  
                                        </select>  
                                              
                                        <input type="hidden" class="pagedisplay"/>  
                                        <a href="#" mce_href="#"  class="first" title="首页">首页</a> |    
                                        <a href="#" mce_href="#"  class="prev" title="上一页">上一页</a> |    
                                        <a href="#" mce_href="#" class="next" title="下一页">下一页</a> |    
                                        <a href="#" mce_href="#" class="last" title="尾页">尾页</a> |    
                                         共<span class="totalpage"></span>页 |    
                                         第<span class="curpage"></span>页 |   
                                         到第 <input name="pageNo" type="text" class="pageNo txt" size="3" value=""/> 页 <a href="#" mce_href="#" class="pageGo">GO</a>       
                                    </form>  
    </div>  
    </body>  
    </html>  

 

7.tablesuggest.jsp提示插件:

             
view plaincopy to clipboardprint?

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    <%   
        String path = request.getContextPath();   
        String basePath = request.getScheme() + "://"   
                + request.getServerName() + ":" + request.getServerPort()   
                + path + "/";   
    %>  
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
        <head>  
            <base href="<%=basePath%>">  
      
            <title>搜索框提示</title>  
            <link rel="stylesheet" type="text/css" media="jquery.autocomplete.css"  
                href="css/jquery.autocomplete.css" />  
            <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"  
                type="text/javascript"></mce:script>  
            <mce:script  
                src="/S2SHJQuery/lib/jquery.autocomplete.js"  
                type="text/javascript"></mce:script>  
            <mce:script type="text/javascript"><!--   
            var  arr = ["Allen","Albert","Alberto","Alladin"];   
            $(document).ready(function() {   
                    //$("#userList").autocomplete(arr);   
                     $("#userList").autocomplete("show.action", { selectFirst:true,extraParams: {testvalue:function(){return $('#userList').val();}},    
                    width: 170,minChars:1, selectOnly: 1,inputSeparator:':'});   
                });    
           
    // --></mce:script>  
        </head>  
        <body>    
            This is my JSP page.    
            <br>  
            <table >  
        <tbody>  
            <tr>  
                <td>提示框测试:<input type="text" name="userList" id="userList"/></td>  
            </tr>  
            </tbody>  
    </table>  
        </body>  
    </html>  

 

8.table-validation.jsp验证插件:

             
view plaincopy to clipboardprint?

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    <%   
    String path = request.getContextPath();   
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    %>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />  
        <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>  
     <mce:script src="/S2SHJQuery/lib/jquery.validate.js" mce_src="S2SHJQuery/lib/jquery.validate.js" type="text/javascript"></mce:script>  
     <mce:script src="/S2SHJQuery/lib/jquery.validate.messages_cn.js" mce_src="S2SHJQuery/lib/jquery.validate.messages_cn.js" type="text/javascript"></mce:script>  
     <mce:style type="text/css"><!--   
    * { font-family: Verdana; font-size: 96%; }   
    label { width: 10em; float: left; }   
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }   
    p { clear: both; }   
    .submit { margin-left: 12em; }   
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }   
    --></mce:style><style type="text/css" mce_bogus="1">* { font-family: Verdana; font-size: 96%; }   
    label { width: 10em; float: left; }   
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }   
    p { clear: both; }   
    .submit { margin-left: 12em; }   
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }</style>  
      <mce:script type="text/javascript"><!--   
      $(document).ready(function(){   
        //引入验证的js.jquery.validate.js,并引入中文js jquery.validate.messages_cn.js   
        //可在js里面进行修改,注意css格式   
        //获取form值后,即可根据id值来进行validation操作   
        //取相应的验证规则:对应的输入值即可   
        //可参照锋利的JQuery P218页   
        //同时可利用这一特性生成验证码   
        $("#commentForm").validate({   
            rules: {   
                username: {   
                    required: true,   
                    minlength: 3   
                },   
                email: {   
                    required: true,   
                    email: true   
                },   
                url:"url",   
                comment: "required"   
            }   
          });   
      });   
         
    // --></mce:script>  
      </head>  
         
      <body>  
        <form class="cmxform" id="commentForm" method="get" action="">  
     <fieldset>  
       <legend>jquery-validation 插件jsp</legend>  
       <p>  
         <label for="cusername">用户名:</label>  
         <em>*</em><input id="cusername" name="username" size="25" />  
       </p>  
       <p>  
         <label for="cemail">邮件:</label>  
         <em>*</em><input id="cemail" name="email" size="25"  />  
       </p>  
       <p>  
         <label for="curl">URL:</label>  
         <em>  </em><input id="curl" name="url" size="25"  value="" />  
       </p>  
       <p>  
         <label for="ccomment">评论:</label>  
         <em>*</em><textarea id="ccomment" name="comment" cols="22">  



















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-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的使用,我也不太熟悉,大家一起学习吧。
 
 
参考资料:
 
Struts 2与AJAX
[url]http://hi.baidu.com/clking419/blog/item/503abb18079b250535fa41b5.html[/url]

你可能感兴趣的:(jquery,Ajax,json,jsp,struts)