项目终于做完了。今天抽点时间对项目中遇到的问题进行下总结，我的模块中在页面要实现一个下拉框联动的功能。例如：你选“中国”时，联动的下拉框显示“北京，上海”；你选美国时，联动的下拉框显示“纽约，华盛顿”。实现这个功能，我采用的是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>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
