整合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代码

view plaincopy to clipboardprint?

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>  

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

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

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

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

view plaincopy to clipboardprint?

1. <script>  
2.       
3.       $(function(){  
4.           var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId");  
5.           obj.onchange=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>  

<script> $(function(){ var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId"); obj.onchange=function(){ var prodId=obj.value; var url="${contextPath}/assets/businessChange/ajaxGetCompany.do"; var jsonProd={productId:prodId}; //JSON对象 var prodStr=JSON.stringify(jsonProd); //将JSON对象转变成JSON格式的字符串 $.post(url,{json:prodStr},callback,"json"); } function callback(json){ $("#company").html(json.msg); } }); </script>

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

view plaincopy to clipboardprint?

1. var jsonProd={productId:prodId};  

var jsonProd={productId:prodId};

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

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

$.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”等

view plaincopy to clipboardprint?

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

function callback(json){ $("#company").html(json.msg); } });

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

struts2 action类

view plaincopy to clipboardprint?

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

import org.json.JSONObject;public class CBApplyAction extends ActionSupport {private IProductMng productMng;private String json;/** * 通过选择的项目名称，给出提示事业部名称的提示信息 * * @return * @throws Exception */public void ajaxGetCompany() throws Exception {JSONObject jsonObj = new JSONObject(json); // 将JSON格式的字符串构造成JSON对象String productId = jsonObj.getString("productId"); // 获取JSON对象中的productId属性的值ProductBO prod = productMng.loadProduct(Integer.parseInt(productId));Integer companyId = prod.getCompanyId();CompanyBO comp = productMng.loadCompany(companyId);String companyName = "事业部为:" + comp.getName();json = "{msg:'" + companyName + "'}"; //构造JSON格式的字符串 sendMsg(json); //发送JSON格式的字符串回JS端 }public void sendMsg(String content) throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.getWriter().write(content); } public String getJson() {return json;}public void setJson(String json) {this.json = json;}public void setProductMng(IProductMng productMng) {this.productMng = productMng;} }

  

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

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

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

struts2 配置文件

view plaincopy to clipboardprint?

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

<action name="ajaxGetCompany" class="CBApplyAction"method="ajaxGetCompany"></action>

没有result

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

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

 下载文件：

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