DWR详细配置及例子（可以通过下载测试）

Struts+Spring+Hibernate+dwr 实现省市区三级联动

参考了网上一些资料，总结的Struts+Spring+Hibernate+dwr 实现省市区三级联动

Struts+Spring+Hibernate的配置就省了........

1）.这里主要需要说明的是在web.xml里面需要配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.4"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

................

   <servlet>
      <servlet-name>dwr-invoker</servlet-name>
      <servlet-class>uk.ltd.getahead.dwr.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>

...............

</web-app>

2）dwr配置 将dwr.jar 复制于WEB-INF/lib 目录下。

3.）然后在web.xml的同目录下，创建一个dwr.xml，配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd">
<dwr>
   <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="province">
      <param name="class" value="com.crb2b.util.Province"/>
    </create>
</allow>
</dwr>

4）.对于dwr.xml需要说明的是：
       1.creator：定义供javascript调用的新建对象的方法，也即对象的构造方法。其可以包括【new，none，scripted，spring，jsf，struts，pageflow，ejb3】关于creator的具体用法，可以参照http://getahead.org/dwr/server/dwrxml/creators。
      2.javascript：java类暴露给浏览器所调用的javascript的名称，也就是在jsp页面所出现的js的名称一定和此处所定义的一致。
      3.param：指定create元素所需要的参数，比如其允许创建的java类的名称。
      4.name：param元素所指定的参数名称。
      5.value：param元素所指定的参数值。

5）相关类：Province类 提供给js调用;FindLimitData 类进行数据处理类。

Province类 如下：

package com.crb2b.util;

import java.util.List;
import java.util.Map;

import com.crb2b.struts.action.FindLimitData;

public class Province {

      private FindLimitData limitData = null;

public Province() {
   init();
}

void init() {
   limitData = FindLimitData.getInstance();
}

public Map getProvice() {
   return limitData.getProvice();
}

public Map getSelectOption(String id) {
   return limitData.getSelectOption(id);
}

}

 

private FindLimitData limitData = null;

public Province() {
   init();
}

void init() {
   limitData = FindLimitData.getInstance();
}

public Map getProvice() {
   return limitData.getProvice();
}

public Map getSelectOption(String id) {
   return limitData.getSelectOption(id);
}

 

FindLimitData 类如下：

package com.crb2b.struts.action;

import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;

import com.crb2b.data.bo.City;
import com.crb2b.data.bo.County;
import com.crb2b.util.Province;

public class FindLimitData extends BaseAction {

private static final Logger LOGGER = LogManager
    .getLogger(FindLimitData.class);

static private FindLimitData limitdata = null; // 唯一实例
static private List citylist = null;
static private List countylist = null;

public FindLimitData() {
   super();
}

static synchronized public FindLimitData getInstance() {
   if (null == limitdata)
     limitdata = new FindLimitData();
    return limitdata;
}

   public List findCountyAll() {
     return this.getCountyService().findCountyAll();
}

public List findCityAll() {
     return this.getCityService().findCityAll();

}

public List findProvinceAll() {
     return this.getProvinceService().findProvinceAll();
}

   public Map getProvice() {
      return this.getProvinceService().getProvice();
}

public Map getSelectOption(String id) {
   String strId = id;
   if (id.indexOf("-") >= 0) {
    String[] splitID = strId.split("-");
    if (countylist == null)
     countylist = this.findCountyAll();
    Iterator it = countylist.iterator();
    Map map = null;
    map = new HashMap();
    while (it.hasNext()) {
     County county = (County) it.next();
     String pid = county.getCounPid();
     String cid = county.getCounCid();
     String ccid = county.getCounCcid();
     String ccname = county.getCounName();
     if (pid.equals(splitID[0]) && cid.equals(splitID[1])) {
      map.put(pid + "-" + cid + "-" + ccid, ccname);
     }
    }
    Map map1 = null;
    map1 = new HashMap();
    map1 = map;
    return map1;
   } else {
    if (citylist == null)
     citylist = this.findCityAll();
    Iterator it = citylist.iterator();
    Map map = null;
    map = new HashMap();
    while (it.hasNext()) {
     City city = (City) it.next();
     String pid = city.getCityPid();
     String cid = city.getCityCid();
     String cname = city.getCityName();
     LOGGER.debug(pid + ":" + strId);
     if (pid.equals(strId)) {
      map.put(pid + "-" + cid, cname);
     }
    }
    Map map1 = null;
    map1 = new HashMap();
    map1 = map;
    return map1;
   }
}
}

6）至此我们需要测试一下，看看配置的DWR是否正确，启动Tomcat，通过访问http://localhost:8080/yourwebappname/dwr，出现界面说明配置成功，再进行相关方法调用测试。

 

7）index.jsp页面

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ page import ="java.util.*,com.crb2b.util.*" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>

<%

   com.crb2b.util.Province province=new com.crb2b.util.Province();

Map map =null;   //初始省份信息。
   map=province.getProvice();
   if (map.size() != 0)
{
   session.setAttribute("map", map);
}

%>

............

<script type="text/javascript" src="dwr/interface/province.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script language="javascript">
// 根据选择的省,获得其所辖的市  
    function getCity(){
       var obj_Pro = document.getElementById("Province");
       var obj_City = document.getElementById("City");
       var obj_County = document.getElementById("County");
       var pro_Index = obj_Pro.selectedIndex;   
       var pro_Value = obj_Pro.options[pro_Index].value;
       var mydata=null;
       if(pro_Value != "" && pro_Value != null){    
        province.getSelectOption(pro_Value,cityReturn);   
        }else{
        DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择'});
        DWRUtil.removeAllOptions(obj_County);
     DWRUtil.addOptions(obj_County,{'':'请选择'});
       }
    }
    // 回调函数
    function cityReturn(data){   

     var obj_City = document.getElementById("City");
       var obj_County = document.getElementById("County");      
       DWRUtil.removeAllOptions(obj_City);
    DWRUtil.addOptions(obj_City,{'':'请选择'});
    DWRUtil.removeAllOptions(obj_County);
    DWRUtil.addOptions(obj_County,{'':'请选择'});  
    DWRUtil.addOptions(obj_City,data);    
      

    }
    // 根据选择的市,获得所辖的县
    function getCounty(){
       var obj_Pro = document.getElementById("Province");
       var obj_City = document.getElementById("City");
       var obj_County = document.getElementById("County");
       var city_Index = obj_City.selectedIndex;
       var city_Value = obj_City.options[city_Index].value;
       if(city_Value != "" && city_Value != null){    
        province.getSelectOption(city_Value,countyReturn);
       }else{
        DWRUtil.removeAllOptions(obj_County);
     DWRUtil.addOptions(obj_County,{'':'请选择'});
       }
    }
    // 回调函数
    function countyReturn(data){
       var obj_County = document.getElementById("County");
       DWRUtil.removeAllOptions(obj_County);
    DWRUtil.addOptions(obj_County,{'':'请选择'});
    DWRUtil.addOptions(obj_County,data);
    }
    </script>

......................

<td>房屋所在省份</td>
<td>
<html:select value="" property="Province" onchange="getCity()">
<html:option value="">==所有省份==</html:option>
<c:forEach items="${map}" var="hashMap">
<html:option value="${hashMap.key}"><c:out value="${hashMap.value}" /></html:option>     
</c:forEach>
</html:select>
</td>
</tr>
<tr>
<td>房屋所在城市</td>
<td>
<html:select value="" property="City" onchange="getCounty()">
<html:option value="">==所有城市==</html:option>  
</html:select></td></tr>
<tr>
<td>区域</td>
<td><html:select value="" property="County" >
<html:option value="">==所有区域==</html:option>
</html:select><br></td></tr>
<tr>

......................

8）对于index.jsp需要说明的是：

   需要引用三个js，province.js[其与dwr.xml里面的javascript的名称相同]，engine.js，util.js。其中对于province.js是由dwr自动生成的javascript文件，包括相应的类以及方法。dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换，dwr/util.js包含了工具函数简化页面处理。

9）正式运行页面，看结果了。

 

 

注：附件含数据库文件