DWR 入門與應用（二）

假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下：

onlyfun.caterpillar;   Option String[] getOptions() String[] , , ;

傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件…


這是我們的網頁…

選項:

傳回的字串陣列會填入opts這個select中，我們的option.js如下…

window.onload = function() OPT.getOptions(populate); ;   function populate(list) DWRUtil.removeAllOptions(); DWRUtil.addOptions(, list);

夠簡單了…不需要解釋了…

看一下結果… 


好啦！我知道有人在說了，這個程式有夠無聊…

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的Java程式示意如下：

onlyfun.caterpillar;   java.util.Map; java.util.TreeMap;   Bike    Map bikes;       Bike()     bikes = TreeMap();     bikes.put(, String[] , , );     bikes.put(, String[] , );     bikes.put(, String[] , , );     bikes.put(, String[] );     bikes.put(, String[] , , );          String[] getYears()     String[] keys = String[bikes.size()];      i = 0;     (String key : bikes.keySet())       keys[i++] = key;           keys;          String[] getBikes(String year)      bikes.get(year);

getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定：


我們會有個腳踏車年份與型號查詢頁面：

年份：   型號：

注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下…

function refreshYearList() Bike.getYears(populateYearList);   function populateYearList(list) DWRUtil.removeAllOptions(); DWRUtil.addOptions(, list); refreshBikeList();   function refreshBikeList() var year = $().value; Bike.getBikes(year, populateBikeList);   function populateBikeList(list) DWRUtil.removeAllOptions(); DWRUtil.addOptions(, list);

一樣很簡單…

看個無聊的畫面…XD