假設您要從資料庫中查詢出一些字串,然後填寫到表單的下拉選單中。
例如一個示意的Java程式如下:
1<wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>package</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> onlyfun.caterpillar;
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>class</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> Option {</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] getOptions() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
// 實際上這些字串是從資料庫中查到的啦…</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>return</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"良葛格"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "毛美眉"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "米小狗"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">;
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
<?xml version="1.0"</wbr><wbr style="LINE-HEIGHT: 1.3em"> encoding="UTF-8"</wbr><wbr style="LINE-HEIGHT: 1.3em">?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"</wbr><wbr style="LINE-HEIGHT: 1.3em"> "http://www.getahead.ltd.uk/dwr/dwr10.dtd"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<dwr>
<allow>
<create creator="new"</wbr><wbr style="LINE-HEIGHT: 1.3em"> javascript="OPT"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<param name="class"</wbr><wbr style="LINE-HEIGHT: 1.3em"> value="onlyfun.caterpillar.Option"</wbr><wbr style="LINE-HEIGHT: 1.3em">/>
</create>
</allow>
</dwr>
這是我們的網頁…
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
11</wbr><wbr style="LINE-HEIGHT: 1.3em">
12</wbr><wbr style="LINE-HEIGHT: 1.3em">
13</wbr><wbr style="LINE-HEIGHT: 1.3em">
14</wbr><wbr style="LINE-HEIGHT: 1.3em">
15</wbr><wbr style="LINE-HEIGHT: 1.3em">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<html>
<head>
<meta http-equiv="Content-Type"</wbr><wbr style="LINE-HEIGHT: 1.3em"> content="text/html; charset=BIG5"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<script src="option.js"</wbr><wbr style="LINE-HEIGHT: 1.3em"> type="text/javascript"</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script src="dwr/interface/OPT.js"</wbr><wbr style="LINE-HEIGHT: 1.3em"> type="text/javascript"</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script src="dwr/engine.js"</wbr><wbr style="LINE-HEIGHT: 1.3em"> type="text/javascript"</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script src="dwr/util.js"</wbr><wbr style="LINE-HEIGHT: 1.3em"> type="text/javascript"</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
</head>
<body>
選項: <select id="opts"</wbr><wbr style="LINE-HEIGHT: 1.3em">></select>
</body>
</html>
傳回的字串陣列會填入opts這個select中,我們的option.js如下…
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
window.onload = function() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
OPT.getOptions(populate);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">;
function populate(list){</wbr><wbr style="LINE-HEIGHT: 1.3em">
DWRUtil.removeAllOptions("opts"</wbr><wbr style="LINE-HEIGHT: 1.3em">);
DWRUtil.addOptions("opts"</wbr><wbr style="LINE-HEIGHT: 1.3em">, list);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
夠簡單了…不需要解釋了…
看一下結果…
</wbr><wbr>
</wbr><wbr>
好啦!我知道有人在說了,這個程式有夠無聊…</wbr><wbr>
</wbr><wbr>
改一下!就是個不錯的範例了,例如連動方塊,唔!在Ajax in action中叫啥?Dynamic double combo?…
假設一個會去從資料庫中查詢資料的Java程式示意如下:
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
11</wbr><wbr style="LINE-HEIGHT: 1.3em">
12</wbr><wbr style="LINE-HEIGHT: 1.3em">
13</wbr><wbr style="LINE-HEIGHT: 1.3em">
14</wbr><wbr style="LINE-HEIGHT: 1.3em">
15</wbr><wbr style="LINE-HEIGHT: 1.3em">
16</wbr><wbr style="LINE-HEIGHT: 1.3em">
17</wbr><wbr style="LINE-HEIGHT: 1.3em">
18</wbr><wbr style="LINE-HEIGHT: 1.3em">
19</wbr><wbr style="LINE-HEIGHT: 1.3em">
20</wbr><wbr style="LINE-HEIGHT: 1.3em">
21</wbr><wbr style="LINE-HEIGHT: 1.3em">
22</wbr><wbr style="LINE-HEIGHT: 1.3em">
23</wbr><wbr style="LINE-HEIGHT: 1.3em">
24</wbr><wbr style="LINE-HEIGHT: 1.3em">
25</wbr><wbr style="LINE-HEIGHT: 1.3em">
26</wbr><wbr style="LINE-HEIGHT: 1.3em">
27</wbr><wbr style="LINE-HEIGHT: 1.3em">
28</wbr><wbr style="LINE-HEIGHT: 1.3em">
29</wbr><wbr style="LINE-HEIGHT: 1.3em">
30</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>package</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> onlyfun.caterpillar;
<wbr>import</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> java.util.Map;
<wbr>import</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> java.util.TreeMap;
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>class</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> Bike {</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>private</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> Map<String, String[]> bikes;
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> Bike() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
bikes =
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> TreeMap<String, String[]>();
bikes.put("2000"</wbr><wbr style="LINE-HEIGHT: 1.3em">,
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"2000 T1"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2000 T2"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2000 T3"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">);
bikes.put("2001"</wbr><wbr style="LINE-HEIGHT: 1.3em">,
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"2001 A1"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2001 A2"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">);
bikes.put("2002"</wbr><wbr style="LINE-HEIGHT: 1.3em">,
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"2002 BW1"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2002 BW2"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2002 BW"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">);
bikes.put("2003"</wbr><wbr style="LINE-HEIGHT: 1.3em">,
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"2003 S320"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">);
bikes.put("2004"</wbr><wbr style="LINE-HEIGHT: 1.3em">,
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] {</wbr><wbr style="LINE-HEIGHT: 1.3em">"2004 TA1"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2004 TA2"</wbr><wbr style="LINE-HEIGHT: 1.3em">, "2004 TA3"</wbr><wbr style="LINE-HEIGHT: 1.3em">}</wbr><wbr style="LINE-HEIGHT: 1.3em">);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] getYears() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
String[] keys =
<wbr>new</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[bikes.size()];
<wbr>int</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> i = 0;
<wbr>for</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">(String key : bikes.keySet()) {</wbr><wbr style="LINE-HEIGHT: 1.3em">
keys[i++] = key;
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>return</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> keys;
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>public</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> String[] getBikes(String year) {</wbr><wbr style="LINE-HEIGHT: 1.3em">
<wbr>return</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> bikes.get(year);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
getYears()跟getBkies()分別表示產品的年份跟型號,這邊用Map模擬,實際上資料是來自資料庫的查詢。
一樣的,在dwr.xml中設定:
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
<?xml version="1.0"</wbr><wbr style="LINE-HEIGHT: 1.3em"> encoding="UTF-8"</wbr><wbr style="LINE-HEIGHT: 1.3em">?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"</wbr><wbr style="LINE-HEIGHT: 1.3em"> "http://www.getahead.ltd.uk/dwr/dwr10.dtd"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<dwr>
<allow>
<create creator="new"</wbr><wbr style="LINE-HEIGHT: 1.3em"> javascript="Bike"</wbr><wbr style="LINE-HEIGHT: 1.3em"> scope="application"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<param name="class"</wbr><wbr style="LINE-HEIGHT: 1.3em"> value="onlyfun.caterpillar.Bike"</wbr><wbr style="LINE-HEIGHT: 1.3em">/>
</create>
</allow>
</dwr>
我們會有個腳踏車年份與型號查詢頁面:
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
11</wbr><wbr style="LINE-HEIGHT: 1.3em">
12</wbr><wbr style="LINE-HEIGHT: 1.3em">
13</wbr><wbr style="LINE-HEIGHT: 1.3em">
14</wbr><wbr style="LINE-HEIGHT: 1.3em">
15</wbr><wbr style="LINE-HEIGHT: 1.3em">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<html>
<head>
<meta http-equiv="Content-Type"</wbr><wbr style="LINE-HEIGHT: 1.3em"> content="text/html; charset=BIG5"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
<title>Insert title here</title>
<script type='text/javascript'</wbr><wbr style="LINE-HEIGHT: 1.3em"> src='dwr/interface/Bike.js'</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script type='text/javascript'</wbr><wbr style="LINE-HEIGHT: 1.3em"> src='dwr/engine.js'</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script type='text/javascript'</wbr><wbr style="LINE-HEIGHT: 1.3em"> src='dwr/util.js'</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
<script type='text/javascript'</wbr><wbr style="LINE-HEIGHT: 1.3em"> src='bike.js'</wbr><wbr style="LINE-HEIGHT: 1.3em">></script>
</head>
<body onload="refreshYearList();"</wbr><wbr style="LINE-HEIGHT: 1.3em">>
年份:<select id="years"</wbr><wbr style="LINE-HEIGHT: 1.3em"> onchange="refreshBikeList();"</wbr><wbr style="LINE-HEIGHT: 1.3em">></select><br/><br/>
型號:<select id="bikes"</wbr><wbr style="LINE-HEIGHT: 1.3em">></select><br/>
</body>
</html>
注意,在選完第一個年份後,會觸發onchange事件,接著第二個下拉選單會自動填上對應年份的型號,而不是按鈕按下,再去取得第二個下拉選單,然後refresh...blah...blah...
bike.js如下…
1</wbr><wbr style="LINE-HEIGHT: 1.3em">
2</wbr><wbr style="LINE-HEIGHT: 1.3em">
3</wbr><wbr style="LINE-HEIGHT: 1.3em">
4</wbr><wbr style="LINE-HEIGHT: 1.3em">
5</wbr><wbr style="LINE-HEIGHT: 1.3em">
6</wbr><wbr style="LINE-HEIGHT: 1.3em">
7</wbr><wbr style="LINE-HEIGHT: 1.3em">
8</wbr><wbr style="LINE-HEIGHT: 1.3em">
9</wbr><wbr style="LINE-HEIGHT: 1.3em">
10</wbr><wbr style="LINE-HEIGHT: 1.3em">
11</wbr><wbr style="LINE-HEIGHT: 1.3em">
12</wbr><wbr style="LINE-HEIGHT: 1.3em">
13</wbr><wbr style="LINE-HEIGHT: 1.3em">
14</wbr><wbr style="LINE-HEIGHT: 1.3em">
15</wbr><wbr style="LINE-HEIGHT: 1.3em">
16</wbr><wbr style="LINE-HEIGHT: 1.3em">
17</wbr><wbr style="LINE-HEIGHT: 1.3em">
18</wbr><wbr style="LINE-HEIGHT: 1.3em">
19</wbr><wbr style="LINE-HEIGHT: 1.3em">
function refreshYearList() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
Bike.getYears(populateYearList);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
function populateYearList(list){</wbr><wbr style="LINE-HEIGHT: 1.3em">
DWRUtil.removeAllOptions("years"</wbr><wbr style="LINE-HEIGHT: 1.3em">);
DWRUtil.addOptions("years"</wbr><wbr style="LINE-HEIGHT: 1.3em">, list);
refreshBikeList();
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
function refreshBikeList() {</wbr><wbr style="LINE-HEIGHT: 1.3em">
var year = $("years"</wbr><wbr style="LINE-HEIGHT: 1.3em">).value;
Bike.getBikes(year, populateBikeList);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
function populateBikeList(list){</wbr><wbr style="LINE-HEIGHT: 1.3em">
DWRUtil.removeAllOptions("bikes"</wbr><wbr style="LINE-HEIGHT: 1.3em">);
DWRUtil.addOptions("bikes"</wbr><wbr style="LINE-HEIGHT: 1.3em">, list);
}</wbr><wbr style="LINE-HEIGHT: 1.3em">
一樣很簡單…
看個無聊的畫面…XD
</wbr><wbr>
</wbr><wbr>