`
fuhao9611
  • 浏览: 85634 次
  • 性别: Icon_minigender_1
  • 来自: 陕西 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

DWR实现省市县三级联动

    博客分类:
  • Ajax
阅读更多
   前段时间想学习学习DWR,在网上查找资料无数,没有见到一个现成的例子可以参阅一下,郁闷无比,罢了,还是自己动手,丰衣足食吧!
   本例子是由MySQL数据库,结合前台使用Struts来完成的。主要是为了说明DWR的使用,所以对于数据库的设计等等都较简单,大家觉得那里有什么不合理之处请给我留言!数据库创建的脚本在附件里面。
   数据库的大概设计是,共有三个字段[id,name,parentid],顾名思义,id就是唯一标示一条记录,name存放的是省市县的名称,parentid存放的其上级的id,例如对于省一级别的,其parentid全部为0,对于市一级别的,其parentid存放的是所对应省的id,对于县一级别的,其parentid存放的是所对应市的id。
   首先在进入显示页面的时候就把所有的parentid=0的全部查出来,初始化进入省所在的下拉列表中,然后根据选择省的下拉列表,通过DWR调用java方法将其所对应的市取出来,以此类推……
   这里主要需要说明的是在web.xml里面需要配置如下:
<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.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="province">
      <param name="class" value="com.xinli.struts.service.ProvinceService"/>
    </create>
  </allow>
</dwr>
对于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元素所指定的参数值。
后台业务方法实现如下ProvinceDAO
package com.xinli.struts.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.HashMap;
import java.util.Map;

import com.xinli.struts.db.DBManager;

/**
 * @author fuhao
 */
public class ProvinceDAO {

	private static Connection conn = null;

	private static Statement stmt = null;

	private static ResultSet rs = null;
	
	// 全取所有的parentid=0的记录,也即将所有的省查询出来,放入Map中
	public Map getFirst() throws SQLException {
		Map map = new HashMap();
		String sql = "select * from province where parentid = " + 0;
		try {
			conn = DBManager.getConnection();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				map.put(rs.getInt("id"), rs.getString("name"));
			}
			return map;
		} catch (Exception e) {
			System.out.println("----获得省的方法出现异常:" + e);
			e.printStackTrace();
			return null;
		} finally {
			if (rs != null && stmt != null && conn != null) {
				rs.close();
				stmt.close();
				conn.close();
			}
		}
	}
	// 根据parentid获得其下所对应的记录
	public Map getChildByParentId(String id) throws SQLException {
		Map map = new HashMap();
		String sql = "select * from province as p where p.parentid =" + id;
		try {
			conn = DBManager.getConnection();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				map.put(rs.getInt("id"), rs.getString("name"));
			}
			return map;
		} catch (Exception e) {
			System.out.println("----根据父id获得子记录的方法出现异常:" + e);
			e.printStackTrace();
			return null;
		} finally {
			if (rs != null && stmt != null && conn != null) {
				rs.close();
				stmt.close();
				conn.close();
			}
		}
	}
}

OK,至此我们需要测试一下,看看配置的DWR是否正确,启动Tomcat,通过访问http://localhost:8080/Struts_Dwr/dwr,此时会出现如下图所示的页面:

点击页面超链接,进入如下页面:

点击getChild("1")后面的Execute方法,如果弹出如下所示的弹出框:

则说明DWR配置完全正确,可以继续写jsp页面了!曙光就在眼前!呵呵~~~
前台的jsp页面index.jsp代码如下:
<%@ page language="java" pageEncoding="GB2312"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市县三级联动</title>
    <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("sel_Pro");
    		var obj_City = document.getElementById("sel_City");
    		var obj_County = document.getElementById("sel_County");
    		var pro_Index = obj_Pro.selectedIndex;
    		var pro_Value = obj_Pro.options[pro_Index].value;
    		if(pro_Value != "" && pro_Value != null){
    			province.getChild(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("sel_City");
    		DWRUtil.removeAllOptions(obj_City);
			DWRUtil.addOptions(obj_City,{'':'请选择'});
			DWRUtil.addOptions(obj_City,data);
    	}
    // 根据选择的市,获得所辖的县
    	function getCounty(){
    		var obj_Pro = document.getElementById("sel_Pro");
    		var obj_City = document.getElementById("sel_City");
    		var obj_County = document.getElementById("sel_County");
    		var city_Index = obj_City.selectedIndex;
    		var city_Value = obj_City.options[city_Index].value;
    		if(city_Value != "" && city_Value != null){
    			province.getChild(city_Value,countyReturn);
    		}else{
    			DWRUtil.removeAllOptions(obj_County);
				DWRUtil.addOptions(obj_County,{'':'请选择'});
    		}
    	}
    // 回调函数
    	function countyReturn(data){
    		var obj_County = document.getElementById("sel_County");
    		DWRUtil.removeAllOptions(obj_County);
			DWRUtil.addOptions(obj_County,{'':'请选择'});
			DWRUtil.addOptions(obj_County,data);
    	}
    </script>
  </head>
  <body>
  <br /><br />
  <div align="center"><font color="red">省市县三级联动</font></div>
  <br />
   <table align="center">
   	 <tbody>
   	 	<tr>
   	 		<td>省:</td>
   	 		<td>
   	 			<select id="sel_Pro" onchange="getCity()">
   	 				<option value="">请选择</option>
   	 				<c:forEach items="${map}" var="hashMap">
   	 					<option value="<c:out value='${hashMap.key}' />"><c:out value="${hashMap.value}" /></option>
   	 				</c:forEach>
   	 			</select>
   	 		</td>
   	 		<td>市:</td>
   	 		<td>
   	 			<select id="sel_City" onchange="getCounty()">
   	 				<option value="">请选择</option>
   	 			</select>
   	 		</td>
   	 		<td>县:</td>
   	 		<td>
   	 			<select id="sel_County">
   	 				<option value="">请选择</option>
   	 			</select>
   	 		</td>
   	 	</tr>
   	 </tbody>
   </table>
  </body>
</html>

对于index.jsp需要说明的是:需要引用三个js,province.js[其与dwr.xml里面的javascript的名称相同],engine.js,util.js。其中对于province.js是由dwr自动生成的javascript文件,包括相应的类以及方法。dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换,dwr/util.js包含了工具函数简化页面处理。
至此编码完毕,开启Tomcat,在浏览器里面输入
http://localhost:8080/Struts_Dwr/welcome.do可以看到如下效果:

数据库脚本以及本例子的源代码都在附件里面可以下载,本例子MySQL数据库的用户名和密码都是root,大家可以将struts-config.xml里面的user和password修改成的Mysql帐号即可。
  • province.zip (695 Bytes)
  • 描述: 例子所需要的MySQL数据库脚本
  • 下载次数: 2130
  • Struts_Dwr.war (1.8 MB)
  • 描述: 例子源代码,在Tomcat6.0.10+IE6.0上测试通过
  • 下载次数: 3941
分享到:
评论
22 楼 宋建勇 2012-02-13  
com.xinli.struts.service.ProvinceService这个类在哪
21 楼 zcfg 2008-05-31  
纯js就能搞定了 之前写了个四级联动的 数据用的json

不过。。。代码写的很乱 没优化没整理 实在羞于拿出来看 嘿嘿
20 楼 cnpww 2008-03-27  
楼主能否看看DBManager.java代码?
19 楼 soreport 2008-01-04  
其实用一个ComboTree就不存在联动的问题了,呵呵,不过还是要支持一下。
18 楼 木头人 2008-01-04  
初学DWR,非常有帮助
17 楼 mia_show 2008-01-03  
楼主确定通过测试了么?
我觉得那个页面上面 应该 加个onload 事件吧?
不然页面加载了 还是没有数据,
先调用一个函数得到所有的省,
加到 选项中,然后根本选的省 才能触发. 选择市级的菜单选项吧??
16 楼 halfmile 2007-11-10  
好复杂啊。。。。建议你去看看淘宝的实现方法,简单、快捷、出错几率低。

另外,淘宝的实行方法也有不足,数据结构还可以优化,用一维数组,慢。如果换成对象结构,数据js压缩后可以从140降低到 110k.
15 楼 kaki 2007-11-09  
偶想找的就是这个数据库,哈哈哈哈
JAVA MAP 经过DWR转化后就是直接可以使用的java script array.

楼主的代码还可以简洁。
14 楼 wsy0322 2007-10-20  
如果你是讲解DWR的用法,就没有必要用到JSTL,单纯用DWR的 DWRUtil 就能实现你要实现的功能了,另外,这个驱动的依赖性有点弱,应该做到一级同时驱动二级和三级,二级驱动三级这样的效果!
13 楼 zhoumu 2007-08-15  
这种联动,以前我用传统的xmlHttpRequest写过,有点麻烦,用dwr就比较爽啦,前一个月的项目所有的ajax都是用dwr来写,感觉还蛮爽的,虽然dwr有一点点不安全
12 楼 manus 2007-08-14  
有时后可以在<parm>加上这个bean 所对应的 字段,而不是整个对象
11 楼 hax 2007-08-11  
从数据量来说,前两级是可以放在一起读取的。
10 楼 wangdi 2007-08-11  
汗,数据不完整。。
9 楼 wangdi 2007-08-11  
偶想找的就是这个数据库,哈哈哈哈
8 楼 ss19811029 2007-08-11  
楼主旨在介绍一下DWR包的用法,讲清楚怎么用就达到目的了,我觉的这个Demo对于DWR新手来说不错。
当然单独用js也可以实现。
7 楼 qtlkw 2007-08-10  
包里面咋全是class文件呢?
6 楼 hetao06 2007-08-01  
看了lz的设计思路,觉得有一个问题没有考虑到,即直辖市和省辖县的情况。lz用的是第一级驱动第二级,第二级驱动第三级。拿直辖市举例第一级选择北京市后第二级应该为空,而第三级应该为海淀区,玄武区……即第一级直接驱动第三级。而省辖县则应该是第一级同时驱动第二级和第三级。
5 楼 zhanglei 2007-07-24  
下载了war,不过发布到tomcat5.0下有错误哦
4 楼 pipi2142001 2007-07-12  
萝卜白菜,各有所爱!
顶一个@!
3 楼 manus 2007-07-11  
我觉得用Propotype就不错....

相关推荐

    DWR实现省市县三级联动小例子

    标题 "DWR实现省市县三级联动小例子" 暗示了这个压缩包可能包含一个使用Direct Web Remoting (DWR) 技术构建的示例项目,该示例展示了如何实现在网页上进行省、市、县三级联动选择的功能。这种功能在很多中国的网站...

    struts2+dwr实现省市县三级联动

    在本项目“struts2+dwr实现省市县三级联动”中,主要目标是构建一个用户界面,当用户选择一个省份时,市和县的下拉列表会自动更新,展示与所选省份相关的城市和县。这种功能在许多需要地理位置信息的网站或系统中...

    java_DWR递归函数实现城市的省市县三级联动

    在这个场景中,"java_DWR递归函数实现城市的省市县三级联动" 提供了一个利用DWR处理多级联动选择的实例,特别适用于中国的行政区域划分,包括省、市、县三级。这种功能常见于地址选择、物流配送等业务场景。 首先,...

    DWR实现三级联动.pdf

    ### DWR实现省市县三级联动的关键技术点 #### 一、DWR简介及应用场景 - **DWR**(Direct Web Remoting)是一种简化Ajax应用程序开发的框架,它使得客户端JavaScript可以直接调用服务器端的Java方法变得简单易行。在...

    省市县三级联动

    总结来说,省市县三级联动的实现涉及前端与后端的交互,数据库设计,以及选择合适的通信协议和库。Java + JSP + MySQL方案适合大型项目,提供了完整的MVC架构;DWR提供了一种轻量级的远程调用方式,简化了前后端交互...

    dwr写的省市县三级联动

    《DWR实现的省市县三级联动与Oracle数据库的结合》 在现代Web开发中,为了提供用户友好的界面,常需要实现如省市县三级联动的功能,即用户选择一个省份后,下拉菜单自动加载该省份对应的市,接着选择市后,再加载...

    ssh+dwr2实现省市二级联动

    本篇主要讨论如何利用SSH框架和DWR来实现省市二级联动效果。 省市二级联动通常是指在一个下拉菜单选择省份后,另一个下拉菜单会动态加载对应的市一级的数据。这种功能在很多网站的地址填写环节中常见,它可以提高...

    dwr 省市县 三级联动 struts 实例

    在IT行业中,开发一个能够实现省、市、县三级联动的系统是一项常见的需求,尤其是在中国的地理信息系统或电子商务网站中。这个实例是基于DWR(Direct Web Remoting)技术和Struts框架来实现的,旨在帮助开发者更好地...

    SSH DWR省市县三级联动源码

    自己写的三级联动源码,欢迎下载 具体请看我的blog: http://blog.csdn.net/lingnnhym/article/details/7035405 http://blog.csdn.net/lingnnhym/article/details/7035545

    dwr省市区三级级联

    标题 "dwr省市区三级级联" 涉及到的是一个前端开发中的常见问题,即如何实现省市区的三级联动效果。这个标题暗示我们这是一个使用Direct Web Remoting (DWR) 技术来实现的功能,它允许JavaScript与服务器端Java代码...

    Dwr_cities三级联动

    【Dwr_cities三级联动】是一个典型的Web应用程序开发示例,它主要展示了如何实现省、市、县(区)的三级联动效果。这个项目通常用于地址选择或者区域筛选功能,例如在电商网站的配送地址设置中。在这个系统中,用户...

    three ajax ajax ajax three ajax ajax ajax

    在提供的文件"**DWR实现省市县三级联动.mht**"中,很可能包含了如何使用DWR框架实现这一功能的具体步骤和代码示例。MHT文件是一种单个文件的网页存档格式,它包含了HTML、图像和其他资源,使得用户可以在不连接...

    DWR实现省市县级联的小例子

    在这个“DWR实现省市县级联的小例子”中,我们将探讨如何利用DWR来创建一个能够动态更新省市县选择的界面,实现三级联动的效果。 首先,DWR的核心功能在于提供了一个简单的API,使得开发者可以在浏览器中直接调用...

    用hibernate做的省市县三级级联,

    `IUser.java`可能是一个接口,定义了用户相关的一些操作,但在这个特定的场景中,它可能并不直接相关,因为三级联动主要是关于地理区域的。 至于`mysql-connector-java-5.0.6-bin.jar`,这是MySQL数据库连接器,...

    ajax 省市区(县) 联动下拉

    在本案例中,我们将探讨如何利用Ajax技术和MyEclipse开发工具来实现“省市区(县)”的联动效果。 Ajax,全称为Asynchronous JavaScript and XML,是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它...

    如何使用dwr进行联动

    本文将介绍如何使用Direct Web Remoting (DWR) 在Struts、Spring和Hibernate集成的环境中实现省市区三级联动效果。首先,我们理解DWR是一个Java库,它允许Web应用程序实现实时双向通信,即AJAX功能,使得前端...

    SSH_province_sql.rar_SSH_province_sql_ajax_dwr_ssh_ssh ajax

    SSH_province_sql.rar_SSH_province_sql_ajax_dwr_ssh_ssh_ajax这个标题暗示了这是一个与SSH框架(Struts2、Spring、Hibernate)结合DWR(Direct Web Remoting)实现的项目,主要涉及到了省市县三级联动的数据处理,...

    省市级联 ssh整合实现

    这里,我们主要关注如何通过SSH(Struts、Spring、Hibernate)框架实现省市级联的功能,并结合Ajax和DWR进行异步数据交互。 **SSH整合** SSH是三个开源Java框架的组合,包括Struts作为MVC(模型-视图-控制器)框架...

Global site tag (gtag.js) - Google Analytics