整合struts2,jquery,json。采用jquery ajax,从struts2 action返回json类型数据

本文开发环境是SSH2,ajax插件使用jQuery 1.2.6.js和json2.js

实现目的:

在struts2 标签s:doubleselect二级联动标签的基础上实现事件:第二级onchange时调用struts2 action,在action中查询一个名称,然后返回回来,此信息显示在页面上(这只是给用户一个提示信息,不影响表单能否提交)

由于struts2 doubleselect标签任何事件都不起作用,只能根据查看源文件中生成的id来定义它的onchange事件

 jsp页面引入了jquery.js和json2.js

需要加事件的二级联动jsp代码

  1. <td  class = "alignLeft"  width= "22%" >  
  2.         所属业务/项目名称:  
  3.     </td>  
  4.     <td valign="top"   class = "alignLeft"  width= "20%" >  
  5.         <s:doubleselect name="changeApplyFormBO.operationId"  list= "operationList"  listKey= "id"   
  6.         listValue="operationName"  doubleList= "operationSubProductList"    
  7.         doubleListKey="id"  doubleListValue= "prudName"   doubleName= "changeApplyFormBO.productId"   
  8.         headerKey=""   headerValue= "--- Please Select ---"  />    
  9.     <span id="company"  style= "color:red" ></span>  
  10.     </td>  

我们需要在“项目名称”被改变的事件下调用函数,在生成的静态页面中查得它的id是cbApplySubmit_changeApplyFormBO_productId

说明一下,这里生成的id有一点规律,貌似。cbApplySubmit是本页面form表单的action,而changeApplyFormBO.productId是“项目名称”的name

下面给出定制下拉菜单事件的js

  1. <script>  
  2.       
  3.       $(function (){  
  4.           var  obj=document.getElementById( "cbApplySubmit_changeApplyFormBO_productId" );  
  5.           obj.οnchange=function (){      
  6.            var  prodId=obj.value;  
  7.            var  url= "${contextPath}/assets/businessChange/ajaxGetCompany.do" ;  
  8.            var  jsonProd={productId:prodId};     //JSON对象       
  9.            var  prodStr=JSON.stringify(jsonProd);     //将JSON对象转变成JSON格式的字符串   
  10.            $.post(url,{json:prodStr},callback,"json" );   
  11.           }  
  12.         function  callback(json){     
  13.             $("#company" ).html(json.msg);  
  14.          }   
  15.      });   
  16.       
  17. </script>  

这里,不管是从浏览器端(JS,Ajax,Jquery等)发送给服务器端,还是从服务器端(Struts的Action,Servlet等)发送回客户端,发送的都是JSON格式的字符串

  1. var  jsonProd={productId:prodId};  

这句是组装JSON对象,这里很简单,key是productId,value是页面选择的项目名称的id

  1. //将JSON对象转变成JSON格式的字符串   
  2. var  prodStr=JSON.stringify(jsonProd);   

通过JavaScript内置对象JSON的stringify方法,将JSON对象转换成字符串。因为,我们传送给服务器端的要是JSON格式的字符串。

  1. $.post(url,{json:prodStr},callback, "json" );   

这一句,jquery用POST方法向服务器端发送数据,url是我们要调用的action全路径,而{json:prodStr}是我们要发送的 数据(data),{json:prodStr},其实也是一个JSON对象,Key:value的形式,注意,我们把prodStr这个json串发过 去,在Action那里接收时,要接收“json”这个变量,这个变量的值就是我们发送的prodStr字符串。

回调函数(callback)是指服务器端成功返回时,在JS端执行的函数。最后一个参数“json”是返回数据类型的一种,另外,还有”text”、“xml”等

  1. function  callback(json){     
  2.         $("#company" ).html(json.msg);  
  3.      }   
  4.  });  

company是span的id,请看最上面二级联动标签处。这个函数用来显示action中组装的json对象的value值

struts2 action类

  1. import  org.json.JSONObject;  
  2.   
  3. public   class  CBApplyAction  extends  ActionSupport {  
  4.     private  IProductMng productMng;  
  5.     private  String json;  
  6.     /**  
  7.      * 通过选择的项目名称,给出提示事业部名称的提示信息  
  8.      *   
  9.      * @return  
  10.      * @throws Exception  
  11.      */   
  12.     public   void  ajaxGetCompany()  throws  Exception {  
  13.         JSONObject jsonObj = new  JSONObject(json);  // 将JSON格式的字符串构造成JSON对象   
  14.           
  15.         String productId = jsonObj.getString("productId" );  // 获取JSON对象中的productId属性的值   
  16.           
  17.         ProductBO prod = productMng.loadProduct(Integer.parseInt(productId));  
  18.         Integer companyId = prod.getCompanyId();  
  19.         CompanyBO comp = productMng.loadCompany(companyId);  
  20.         String companyName = "事业部为:"  + comp.getName();  
  21.         json = "{msg:'"  + companyName +  "'}" ;     //构造JSON格式的字符串      
  22.         sendMsg(json);    //发送JSON格式的字符串回JS端       
  23.     }  
  24.       
  25.     public   void  sendMsg(String content)  throws  IOException{      
  26.         HttpServletResponse response = ServletActionContext.getResponse();      
  27.         response.setCharacterEncoding("UTF-8" );      
  28.         response.getWriter().write(content);      
  29.     }    
  30.   
  31.     public  String getJson() {  
  32.         return  json;  
  33.     }  
  34.   
  35.     public   void  setJson(String json) {  
  36.         this .json = json;  
  37.     }  
  38.   
  39.     public   void  setProductMng(IProductMng productMng) {  
  40.         this .productMng = productMng;  
  41.     }    
  42. }  

  

JSONObject是我从json的网站http://www.json.org/java/index.html 上下载了一些java文件,然后将这些.java文件打成一个jar包json.jar,放在项目lib里面

ajaxGetCompany方法没有像struts2 别的方法那样有返回值String,这里设的是void,因我们不需要任何跳转

这里有个需要注意的,json = "{msg:'" + companyName + "'}"; companyName外面应该有引号括起来

struts2 配置文件

  1. <action name= "ajaxGetCompany"   class = "CBApplyAction"   
  2.     method="ajaxGetCompany" >  
  3. </action>  

没有result

暂时没找到csdn传附件的地方

所用到的js文件和jar包在这里下载,我放到javaeye博客里去了

 下载文件:

http://hardwin.javaeye.com/blog/484951

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章