[實作] 建構 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;