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

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

<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

<script>

      $(function
(){
          var
 obj=document.getElementById(
"cbApplySubmit_changeApplyFormBO_productId"
);
          obj.οnchange=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>

<script> $(function(){ var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId"); obj.οnchange=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格式的字符串

var
 jsonProd={productId:prodId};

var jsonProd={productId:prodId};

這句是組裝JSON對象，這裏很簡單，key是productId，value是頁面選擇的項目名稱的id

//將JSON對象轉變成JSON格式的字符串
var
 prodStr=JSON.stringify(jsonProd);

//將JSON對象轉變成JSON格式的字符串 var prodStr=JSON.stringify(jsonProd);

通過JavaScript內置對象JSON的stringify方法，將JSON對象轉換成字符串。因爲，我們傳送給服務器端的要是JSON格式的字符串。

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

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

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

company是span的id，請看最上面二級聯動標籤處。這個函數用來顯示action中組裝的json對象的value值

struts2 action類

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

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 配置文件

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

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

沒有result

暫時沒找到csdn傳附件的地方

所用到的js文件和jar包在這裏下載，我放到javaeye博客裏去了

 下載文件：

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