DWR 入門與應用（二）

最新推荐文章于 2024-09-12 09:47:47 发布

最新推荐文章于 2024-09-12 09:47:47 发布 · 155 阅读

文章标签：

#DWR #JavaScript #HTML #Ajax #XML #ViewUI

本文介绍如何使用 DWR (Direct Web Remoting) 实现网页上的下拉框联动功能，通过 JavaScript 调用远程 Java 方法获取数据并动态更新下拉框选项。示例代码展示了从数据库查询产品年份及型号，并将其填充到 HTML 下拉菜单的过程。

 onlyfun.caterpillar;

  Option 
 String[] getOptions() 

  String[] , , ;

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

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC  >

<dwr>
  <allow>
    <create creator= javascript=>
        <param name= value=/>
    </create>  
  </allow>
</dwr>

這是我們的網頁…

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<script src= type=></script>
<script src= type=></script>
<script src= type=></script>
<script src= type=></script>

</head>

<body>
    選項: <select id=></select>
</body>
</html>

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

window.onload = function() 
    OPT.getOptions(populate);  
;

function populate(list)
    DWRUtil.removeAllOptions();
    DWRUtil.addOptions(, list);

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

看一下結果…

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

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

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

 onlyfun.caterpillar;

 java.util.Map;
 java.util.TreeMap;

  Bike 
 Map<String, String[]> bikes;

 Bike() 
bikes =  TreeMap<String, String[]>();
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中設定：

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC  >

<dwr>
  <allow>
    <create creator= javascript= scope=>
        <param name= value=/>
    </create>
  </allow>
</dwr>

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

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<title>Insert title here</title>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
</head>
<body onload=>
年份：<select id= onchange=></select><br/><br/>
型號：<select id=></select><br/>
</body>
</html>

注意，在選完第一個年份後，會觸發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