DWR实现省市县三级联动

最新推荐文章于 2016-06-07 10:58:00 发布

fuhao9611

最新推荐文章于 2016-06-07 10:58:00 发布

阅读量121

点赞数

分类专栏： Ajax 文章标签： DWR Struts SQL JavaScript MySQL ViewUI

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前段时间想学习学习DWR，在网上查找资料无数，没有见到一个现成的例子可以参阅一下，郁闷无比，罢了，还是自己动手，丰衣足食吧！
本例子是由MySQL数据库，结合前台使用Struts来完成的。主要是为了说明DWR的使用，所以对于数据库的设计等等都较简单，大家觉得那里有什么不合理之处请给我留言！数据库创建的脚本在附件里面。
数据库的大概设计是，共有三个字段[id,name,parentid]，顾名思义，id就是唯一标示一条记录，name存放的是省市县的名称，parentid存放的其上级的id，例如对于省一级别的，其parentid全部为0，对于市一级别的，其parentid存放的是所对应省的id，对于县一级别的，其parentid存放的是所对应市的id。
首先在进入显示页面的时候就把所有的parentid=0的全部查出来，初始化进入省所在的下拉列表中，然后根据选择省的下拉列表，通过DWR调用java方法将其所对应的市取出来，以此类推……
这里主要需要说明的是在[color=red]web.xml[/color]里面需要配置如下：
[code]<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>
[/code]
然后在web.xml的同目录下，创建一个[color=red]dwr.xml[/color]，配置如下：
[code]<?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>[/code]对于dwr.xml需要说明的是：
1.creator：定义供javascript调用的新建对象的方法，也即对象的构造方法。其可以包括【new，none，scripted，spring，jsf，struts，pageflow，ejb3】关于creator的具体用法，可以参照[url]http://getahead.org/dwr/server/dwrxml/creators[/url]。
2.javascript：java类暴露给浏览器所调用的javascript的名称，也就是在jsp页面所出现的js的名称一定和此处所定义的一致。
3.param：指定create元素所需要的参数，比如其允许创建的java类的名称。
4.name：param元素所指定的参数名称。
5.value：param元素所指定的参数值。
后台业务方法实现如下[color=red]ProvinceDAO[/color]：
[code]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();
}
}
}
}[/code]
OK，至此我们需要测试一下，看看配置的DWR是否正确，启动Tomcat，通过访问[url]http://localhost:8080/Struts_Dwr/dwr[/url]，此时会出现如下图所示的页面：
[img]http://fuhao9611.iteye.com/upload/picture/pic/4268/db14aaaa-ddb1-49a6-9da8-483b957c8e01.jpg[/img]
点击页面超链接，进入如下页面：
[img]http://fuhao9611.iteye.com/upload/picture/pic/4269/4c28843e-0572-44de-9edc-7c8bfa6e8a37.jpg[/img]
点击getChild("1")后面的Execute方法，如果弹出如下所示的弹出框：
[img]http://fuhao9611.iteye.com/upload/picture/pic/4270/6f0a2682-5eb2-4cd2-b2d8-f42d809d2284.jpg[/img]
则说明DWR配置完全正确，可以继续写jsp页面了！曙光就在眼前！呵呵~~~
前台的jsp页面[color=red]index.jsp[/color]代码如下：
[code]<%@ 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" οnchange="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" οnchange="getCounty()">
<option value="">请选择</option>
</select>
</td>
<td>县:</td>
<td>
<select id="sel_County">
<option value="">请选择</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
[/code]
对于index.jsp需要说明的是：需要引用三个js，province.js[其与dwr.xml里面的javascript的名称相同]，engine.js，util.js。其中对于province.js是由dwr自动生成的javascript文件，包括相应的类以及方法。dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换，dwr/util.js包含了工具函数简化页面处理。
至此编码完毕，开启Tomcat，在浏览器里面输入
[url]http://localhost:8080/Struts_Dwr/welcome.do[/url]可以看到如下效果：
[img]http://fuhao9611.iteye.com/upload/picture/pic/4271/cf1cbee5-eeca-429d-9d48-20639fef6b17.jpg[/img]
数据库脚本以及本例子的源代码都在附件里面可以下载，本例子MySQL数据库的用户名和密码都是root，大家可以将struts-config.xml里面的user和password修改成的Mysql帐号即可。

fuhao9611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DWR实现省市县三级联动

前段时间想学习学习DWR，在网上查找资料无数，没有见到一个现成的例子可以参阅一下，郁闷无比，罢了，还是自己动手，丰衣足食吧！本例子是由MySQL数据库，结合前台使用Struts来完成的。主要是为了说明DWR的使用，所以对于数据库的设计等等都较简单，大家觉得那里有什么不合理之处请给我留言！数据库创建的脚本在附件里面。数据库的大概设计是，共有三个字段[id,name,pare...
复制链接

扫一扫

专栏目录