DWR 入門與應用(二)
来源:互联网 发布:cd光盘刻录软件 编辑:程序博客网 时间:2024/05/19 22:51
假設您要從資料庫中查詢出一些字串,然後填寫到表單的下拉選單中。
例如一個示意的Java程式如下:
傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…
這是我們的網頁…
傳回的字串陣列會填入opts這個select中,我們的option.js如下…
夠簡單了…不需要解釋了…
看一下結果…
好啦!我知道有人在說了,這個程式有夠無聊…
改一下!就是個不錯的範例了,例如連動方塊,唔!在Ajax in action中叫啥?Dynamic double combo?…
假設一個會去從資料庫中查詢資料的Java程式示意如下:
getYears()跟getBkies()分別表示產品的年份跟型號,這邊用Map模擬,實際上資料是來自資料庫的查詢。
一樣的,在dwr.xml中設定:
我們會有個腳踏車年份與型號查詢頁面:
注意,在選完第一個年份後,會觸發onchange事件,接著第二個下拉選單會自動填上對應年份的型號,而不是按鈕按下,再去取得第二個下拉選單,然後refresh...blah...blah...
bike.js如下…
一樣很簡單…
看個無聊的畫面…XD
例如一個示意的Java程式如下:
1
2
3
4
5
6
7
8
package onlyfun.caterpillar;
public class Option {
public String[] getOptions() {
// 實際上這些字串是從資料庫中查到的啦…
return new String[] {"良葛格", "毛美眉", "米小狗"};
}
}
傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="OPT">
<param name="class" value="onlyfun.caterpillar.Option"/>
</create>
</allow>
</dwr>
這是我們的網頁…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="option.js" type="text/javascript"></script>
<script src="dwr/interface/OPT.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
</head>
<body>
選項: <select id="opts"></select>
</body>
</html>
傳回的字串陣列會填入opts這個select中,我們的option.js如下…
1
2
3
4
5
6
7
8
window.onload = function() {
OPT.getOptions(populate);
};
function populate(list){
DWRUtil.removeAllOptions("opts");
DWRUtil.addOptions("opts", list);
}
夠簡單了…不需要解釋了…
看一下結果…
好啦!我知道有人在說了,這個程式有夠無聊…
改一下!就是個不錯的範例了,例如連動方塊,唔!在Ajax in action中叫啥?Dynamic double combo?…
假設一個會去從資料庫中查詢資料的Java程式示意如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package onlyfun.caterpillar;
import java.util.Map;
import java.util.TreeMap;
public class Bike {
private Map<String, String[]> bikes;
public Bike() {
bikes = new TreeMap<String, String[]>();
bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});
bikes.put("2001", new String[] {"2001 A1", "2001 A2"});
bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});
bikes.put("2003", new String[] {"2003 S320"});
bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});
}
public String[] getYears() {
String[] keys = new String[bikes.size()];
int i = 0;
for(String key : bikes.keySet()) {
keys[i++] = key;
}
return keys;
}
public String[] getBikes(String year) {
return bikes.get(year);
}
}
getYears()跟getBkies()分別表示產品的年份跟型號,這邊用Map模擬,實際上資料是來自資料庫的查詢。
一樣的,在dwr.xml中設定:
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Bike" scope="application">
<param name="class" value="onlyfun.caterpillar.Bike"/>
</create>
</allow>
</dwr>
我們會有個腳踏車年份與型號查詢頁面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script type='text/javascript' src='dwr/interface/Bike.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='bike.js'></script>
</head>
<body onload="refreshYearList();">
年份:<select id="years" onchange="refreshBikeList();"></select><br/><br/>
型號:<select id="bikes"></select><br/>
</body>
</html>
注意,在選完第一個年份後,會觸發onchange事件,接著第二個下拉選單會自動填上對應年份的型號,而不是按鈕按下,再去取得第二個下拉選單,然後refresh...blah...blah...
bike.js如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function refreshYearList() {
Bike.getYears(populateYearList);
}
function populateYearList(list){
DWRUtil.removeAllOptions("years");
DWRUtil.addOptions("years", list);
refreshBikeList();
}
function refreshBikeList() {
var year = $("years").value;
Bike.getBikes(year, populateBikeList);
}
function populateBikeList(list){
DWRUtil.removeAllOptions("bikes");
DWRUtil.addOptions("bikes", list);
}
一樣很簡單…
看個無聊的畫面…XD
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1239538
- DWR 入門與應用(二)
- DWR 入門與應用(二)
- DWR 入門與應用(二)
- DWR 入門與應用(二)
- DWR 入門與應用(二)
- DWR使用手记(二)
- DWR入门(二)
- DWR学习(二)
- dwr学习(二)
- DWR 入門與應用(一)
- DWR 入門與應用(一)
- DWR 入門與應用(三)
- DWR 入門與應用(一)
- DWR 入門與應用(三)
- DWR 入門與應用(一)
- DWR 入門與應用(三)
- DWR 入門與應用(一)
- DWR 入門與應用(一)
- 硬盘基础知识
- 今天新开了blog,希望在这上面记录我今后的点点滴滴。
- 保护硬盘
- DWR 入門與應用(一)
- 准备开通博客
- DWR 入門與應用(二)
- 光棍节快乐
- 毕业设计方向的选择
- debian学习笔记--配置中文
- 关于对异常程序处理的监视程序
- 免费在线语料库
- DWR 入門與應用(三)
- msxml3.dll 错误 ''''80070005'''' 拒绝访问之解决方案
- 用开机信息诊断计算机硬件故障