论坛首页 → Web前端技术论坛 →

DWR实现省市县三级联动

浏览 31154 次
锁定老帖子 主题：DWR实现省市县三级联动
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • fuhao9611
  • 等级: 初级会员
  • 性别:
  • 文章: 23
  • 积分: 88
  • 来自: 陕西 西安
   发表时间：2007-07-10  
DWR
   前段时间想学习学习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
返回顶楼
         
  • cavenaghi
  • 等级: 初级会员
  • 性别:
  • 文章: 32
  • 积分: 85
  • 来自: 辽宁抚顺
   发表时间：2007-07-11  
用dwr?
太奢侈了......
简单的ajax,就可以实现了...
返回顶楼
          回帖地址
0 请登录后投票
  • manus
  • 等级: 三星会员
  • 性别:
  • 文章: 96
  • 积分: 278
   发表时间：2007-07-11  
我觉得用Propotype就不错....
返回顶楼
          回帖地址
0 请登录后投票
  • zhanglei
  • 等级: 初级会员
  • 文章: 1
  • 积分: 30
  • 来自: ...
   发表时间：2007-07-24  
下载了war，不过发布到tomcat5.0下有错误哦
  • 大小: 1.6 MB
返回顶楼
          回帖地址
0 请登录后投票
  • hetao06
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 北京
   发表时间：2007-08-01  
看了lz的设计思路，觉得有一个问题没有考虑到，即直辖市和省辖县的情况。lz用的是第一级驱动第二级，第二级驱动第三级。拿直辖市举例第一级选择北京市后第二级应该为空，而第三级应该为海淀区，玄武区……即第一级直接驱动第三级。而省辖县则应该是第一级同时驱动第二级和第三级。
返回顶楼
          回帖地址
0 请登录后投票
  • qtlkw
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 杭州
   发表时间：2007-08-10  
包里面咋全是class文件呢？
返回顶楼
          回帖地址
0 请登录后投票
  • ss19811029
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 30
  • 来自: 上海
   发表时间：2007-08-11  
楼主旨在介绍一下DWR包的用法，讲清楚怎么用就达到目的了，我觉的这个Demo对于DWR新手来说不错。
当然单独用js也可以实现。
返回顶楼
          回帖地址
0 请登录后投票
  • wangdi
  • 等级: 初级会员
  • 性别:
  • 文章: 862
  • 积分: 20
  • 来自: 不要订阅我啦！！
   发表时间：2007-08-11  
偶想找的就是这个数据库，哈哈哈哈
返回顶楼
          回帖地址
0 请登录后投票
  • wangdi
  • 等级: 初级会员
  • 性别:
  • 文章: 862
  • 积分: 20
  • 来自: 不要订阅我啦！！
   发表时间：2007-08-11  
汗，数据不完整。。
返回顶楼
          回帖地址
0 请登录后投票
  • hax
  • 等级: 四钻会员
  • 性别:
  • 文章: 1543
  • 积分: 1795
  • 来自: 上海
   发表时间：2007-08-11  
从数据量来说，前两级是可以放在一起读取的。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics