項目終於做完了。今天抽點時間對項目中遇到的問題進行下總結，我的模塊中在頁面要實現一個下拉框聯動的功能。例如：你選“中國”時，聯動的下拉框顯示“北京，上海”；你選美國時，聯動的下拉框顯示“紐約，華盛頓”。實現這個功能，我採用的是AJAX的一個框架DWR.它是通過動態把java類生成javascript。感覺好像是在客戶端調用一樣。要使用DWR還需要一些準備工作。1.從網上下載dwr.jar放在項目的lib目錄下。注意，還需要commons-logging.jar包，否則會報錯說是日誌包找不到。3，需要在web.xml中添加
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
另外還需要dwr.xml的文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr//dwr20.dtd"><dwr>
<allow>
<create javascript="test" creator="new" scope="request">
<param name="class" value="com.huan.tv.web.JiLian"></param>
</create>
</allow>
</dwr>
具體的參數意思，等我把項目跑起來在說啊，呵呵。到目前爲止準備工作已告一段落，現在我就對實現聯動功能做具體是代碼實現。我寫了一個JiLian.java來實現具體功能。
package com.huan.tv.web;
import java.util.TreeMap;
import java.util.Map;
/**
* 本類是用DWR實現的一個聯動類
* @author guohusong
*
*/
public class JiLian {
static Map countryMap = null;//countryMap封裝了獲取的國家列表
static Map cityMap = null;//cityMap封裝了獲取的國家下的城市列表
/**
* 此方法在頁面加載時候，把國家數據加載到選擇國家的下拉框
* 在實際開發中這些數據都是從數據庫的靜態表裏讀出來的，現在
* 爲了省時間，所以就把數據給寫死了。
* @return map
*/
public static Map getCountryList(){
countryMap = new TreeMap();
countryMap.put("0", "--請選擇--");
countryMap.put("1", "中國");
countryMap.put("2", "美國");
return countryMap;
}
/**
* 此方法是根據選擇的國家ID號來聯動國家包括的城市列表
* @param countryKey
* @return Map
*/
public static Map getCityList(String countryKey){
cityMap = new TreeMap();
if("1".equals(countryKey.trim())){//如果選擇的是中國
cityMap.put("0", "--請選擇--");
cityMap.put("3", "北京");
cityMap.put("4", "上海");
}
if("2".equals(countryKey.trim())){//如果選擇的是美國
cityMap.put("0", "--請選擇--");
cityMap.put("5", "紐約");
cityMap.put("6", "華盛頓");
}else{
cityMap.put("0", "--請選擇--");
}
return cityMap;
}
}
可以看出JiLian.java就是一個普通的java類。那麼DWR框架怎麼識別它了？這就需要在dwr.xml中給她指定 <param name="class" value="com.huan.tv.web.JiLian"></param>
現在我們就可以對我們寫的dwr進行測試了。在地址欄輸http://localhost:8080/LianDong/dwr/ (LianDong是我的項目名)你會發現會 出現
Classes known to DWR:
- test (com.huan.tv.web.JiLian)
test是我在dwr.xml中配置的javascript的值是用來與javascript交互的名稱.點擊進入你會發現裏面有JiLian.java裏的getCountryList()和getCityList(String countryKey)方法。現在就可以對聯動的方法進行測試了，點擊getCountryList()javascript就會把方法裏面的值取出來。點擊getCityList(“”)在“”裏輸入1，javascript就會把中國裏的城市列出來。輸入2，會把美國的城市顯示出來。
方法測試通過後，下面就要在頁面中調用JiLian.java裏的方法。index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.huan.tv.web.JiLian" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>下拉框聯動實例</title>
<!--引入DWR的JS-->
<script type='text/javascript' src='/LianDong/dwr/interface/test.js'></script>
<script type='text/javascript' src='/LianDong/dwr/engine.js'></script>
<script type='text/javascript' src='/LianDong/dwr/util.js'></script>
</head>
<script type="text/javascript">
function init(){//頁面打開時加載國家列表
test.getCountryList(callback);
}
//Java從根本上講是同步機制，然而AJAX卻是異步的。所以你調用遠程方法時，當數據已經從網絡上返回的時候，你要提供有反調 （callback） 功能的DWR
function callback(data)
{
//將從後臺獲取的國家列表添加到下拉框
DWRUtil.removeAllOptions("country");
DWRUtil.addOptions("country", data);
changeCity();
}
function changeCity()//聯動城市下拉框
{
test.getCityList(DWRUtil.getValue("country"),cityback)
}
function cityback(data)
{
DWRUtil.removeAllOptions("city");
DWRUtil.addOptions("city", data);
}
</script>
<body onload="init()">
<form name="form1" method="post">
<select id="country" onchange="changeCity()">
</select>
<select id="city">
</select>
</form>
</body>
</html>