下拉框联动

原创

guohusong 2011-07-09 11:52:15 ©著作权

文章标签 职场休闲 DWR 数据联动 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者guohusong的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

<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>