假設您要從資料庫中查詢出一些字串,然後填寫到表單的下拉選單中。
例如一個示意的Java程式如下:
12345678 package onlyfun.caterpillar; public class Option { public String[] getOptions() { // 實際上這些字串是從資料庫中查到的啦… return new String[] {"良葛格", "毛美眉", "米小狗"}; }}
傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…
12345678910 <?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>
這是我們的網頁…
123456789101112131415 <!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如下…
12345678 window.onload = function() { OPT.getOptions(populate); }; function populate(list){ DWRUtil.removeAllOptions("opts"); DWRUtil.addOptions("opts", list);}
夠簡單了…不需要解釋了…
看一下結果…
好啦!我知道有人在說了,這個程式有夠無聊…
改一下!就是個不錯的範例了,例如連動方塊,唔!在Ajax in action中叫啥?Dynamic double combo?…
假設一個會去從資料庫中查詢資料的Java程式示意如下:
123456789101112131415161718192021222324252627282930 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中設定:
12345678910 <?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>
我們會有個腳踏車年份與型號查詢頁面:
123456789101112131415 <!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如下…
12345678910111213141516171819 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
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/caterpillar_here/archive/2006/09/18/1239538.aspx
分享到:
相关推荐
(网络整理资料)DWR入门与应用,手把手教你从配置到实例的应用
DWR_入门与应用-林信良(良葛格)
dwr实例 - 这是本人,开发的:小游戏 [大家一起来赚钱] 本例子可做为dwr入门级应用; 有什么问题请和我沟通;
本资料详细讲述了dwr的配置及简单常见的应用,方便快速上手!
基于dwr框架的web应用的设计与使用,是介绍dwr入门的不错的文章。
请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ,放到 WEB-INF/lib 下 … 负责处理客户端请求,并呼叫 Java 对象的是 DWRServlet , DWR 其实也有些 Model 2 的味道,只是 View 的这一层比较弱,因为放到客户端...
内容包括: DWR教程.txt DWR实例教程.txt DWR学习.txt DWR应用总结.txt DWR购物车实例 DWR与界面开发 一个简单的例子 DWR 入门与应用-林信良(良葛格).doc
DWR是是关于开发web2.0网站实现动态交互性,增强用户体验度的一个Ajax框架技术,本文档共10章,其内容依次为:第1章.DWR入门,含3小节;第2章.web.xml配置,含6小节;第3章.dwr.xml配置,含4小节;第4章.整合,含8小节;...
AJAX中的DWR的入门和应用,与大家一起共享
DWR基础应用教程。比较基础知识,入门用
这个是dwr的初级出门例子但对现在已有的应用来说已经够了
ssh+dwr 整合案例.4个框架整合应用入门案列
DWR中文文档和dwr.jar包 DWR中文文档v0.9Ajax向我们袭来的时候,很多写代码的程序员看到了Ajax的发展前景,但并不是每一个程序员都能将页面与代码完美整合在一起,DOM、CSS、javascript让人眼花缭乱,不知从何下手。...
一个很基本的dwr应用示例,很好地说明了dwr工作原理,附工程源代码
DWR是一个Java库,能够使浏览器中的JavaScript和服务器上的Java进行互动,并尽可能简单地调用Java的方法。本文档讲一下关于这个框架的入门配置及应用,服务器采用tomcat
经过本人测试,dwr教程高质量教程,一个星期之内,从入门到实际的项目应用。
快速入门dwr能够然你很容易的理解dwr比快速应用
Java 开发人员与网页设计人员的桥梁 DWR…呃!我懒得写简介了…直接来看看可以做什么吧!… 请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar,放到WEB-INF/lib下… 负责处理客户端请求,并呼叫Java对象的是...
DWR入门 8 1.1 简介 8 1.2 第一个DWR程序:Hello World 9 1.2.1 将DWR放入你的工程 9 1.2.2 编辑配置文件 9 1.2.3 编写service 10 1.2.4 测试DWR 10 1.2.5 编写一个jsp 11 1.3 本...