2010年6月22日 星期二

[實作] 建構 Ajax連動式選單 @jsp

原本我做連動式選單的方式,是在載入頁面時,就把主,副選項都寫到 js array裡,因此在運作上是純粹 js的對應顯示,並無用到 Ajax 的動態機制。




參考這個範例 php + jQuery 的選單,我覺得蠻清楚的,以此改寫之,
有別於範例是使用 php,我這邊是使用 java,前後端溝通是透過 JSON 格式,
[{"id":"xxx","label":"ooo"}]
所以我再產生第二層 select option 時,需要回傳這樣的格式


#後端 .java (pseudocode)


ArrayList alist = new ArrayList();
JSONArray json = null;
Map<String, String> mlist = null ;

while (rs.next())
{
    mlist = new HashMap<String, String>();
    mlist.put("id", rs.getString("sta_num").trim());
    mlist.put("label", CodeConvert.toUnicode(rs.getString("sta_chi").trim()));
    alist.add(mlist);
}

json = JSONArray.fromObject(alist);
response.setContentType("text/html;charset=big5");
response.getWriter().write(json.toString());

說明:
因為 json 是有個 id, label 的 key/value pair,所以透過 map 來定義這個結構,
然後再一個個串給 arraylist。

透過 JSONArray 的函式將 arraylist 轉成 json 型態,
因為中文會變亂碼,所以需要加一行指定編碼,最後寫回網頁。



#前端 .jsp

因為我後端已經定義是 id, label(與預設同),所以不用再複寫 key value之名稱,
這部份是可以透過參數改寫的。

js code 部份:



    $(function () {
        var unit = $('#qryunit');
        var sta = $('#qrystano');

        unit.selectChain({
            target: sta,
            url: 'Ajax',
            data: { ajax: true}
        }).trigger('change');

    });

說明:
qryunit 與 qrystano分別是兩個 select 的 id,
綁訂事件 change 時會觸發;
 url 是後端接受 ajax 呼叫的網址,在此我用 java servlet 寫法,
所以看起來沒有副檔名;(也因此不是回傳值,而是直接寫到 response)
target是 sub select。

ps. 前端 main select name 是 qryunit,所以後端收值需要對應
    String sUnit = request.getParameter("qryunit");
    再拿去串 sql 跑 rs.next()



#參考網址
http://json-lib.sourceforge.net/usage.html
http://csm2kh.blogspot.com/2008/07/json-array-list-json.html
http://become.wei-ting.net/2008/08/jsonjavascript-object-notation.html
 

自我嘗試,需要多裝
json-lib-2.3-jdk15.jar
ezmorph-1.0.6.jar
commons-beanutils-1.8.3.jar
然後
import net.sf.json.JSONArray;

沒有留言: