`
luciesfly
  • 浏览: 70671 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

DWR实现省市县三级联动

DWRSQLJavaStrutsSQL Server 
阅读更多
数据库的大概设计是，共有三个字段[id,name,parentid]，顾名思义，id就是唯一标示一条记录，name存放的是省市县的名称，parentid存放的其上级的id，例如对于省一级别的，其parentid全部为0，对于市一级别的，其parentid存放的是所对应省的 id，对于县一级别的，其parentid存放的是所对应市的id。
   首先在进入显示页面的时候就把所有的parentid=0的全部查出来，初始化进入省所在的下拉列表中，然后根据选择省的下拉列表，通过DWR调用 java方法将其所对应的市取出来，以此类推……
   这里主要需要说明的是在web.xml里面需要配置如下：
Java 代码

   1. <servlet> 
   2.       <servlet-name>dwr-invoker</servlet-name> 
   3.       <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> 
   4.       <init-param> 
   5.          <param-name>debug</param-name> 
   6.           <param-value>true</param-value> 
   7.        </init-param> 
   8.     </servlet> 
   9.     <servlet-mapping> 
  10.         <servlet-name>dwr-invoker</servlet-name> 
  11.         <url-pattern>/dwr/*</url-pattern> 
  12.     </servlet-mapping> 

<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，配置如下：
Java 代码

   1. <?xml version="1.0" encoding="UTF-8"?> 
   2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd"> 
   3. <dwr> 
   4.   <allow> 
   5.     <create creator="new" javascript="province"> 
   6.       <param name="class" value="com.xinli.struts.service.ProvinceService"/> 
   7.     </create> 
   8.   </allow> 
   9. </dwr> 

<?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：
Java 代码

   1. package com.xinli.struts.dao; 
   2.  
   3. import java.sql.Connection; 
   4. import java.sql.ResultSet; 
   5. import java.sql.SQLException; 
   6. import java.sql.Statement; 
   7. import java.util.HashMap; 
   8. import java.util.Map; 
   9.  
  10. import com.xinli.struts.db.DBManager; 
  11.  
  12. /**
  13.  * @author fuhao
  14.  */ 
  15. public class ProvinceDAO { 
  16.  
  17.     private static Connection conn = null; 
  18.  
  19.     private static Statement stmt = null; 
  20.  
  21.     private static ResultSet rs = null; 
  22.      
  23.     // 全取所有的parentid=0的记录,也即将所有的省查询出来,放入Map中 
  24.     public Map getFirst() throws SQLException { 
  25.         Map map = new HashMap(); 
  26.         String sql = "select * from province where parentid = " + 0; 
  27.         try { 
  28.             conn = DBManager.getConnection(); 
  29.             stmt = conn.createStatement(); 
  30.             rs = stmt.executeQuery(sql); 
  31.             while (rs.next()) { 
  32.                 map.put(rs.getInt("id"), rs.getString("name")); 
  33.             } 
  34.             return map; 
  35.         } catch (Exception e) { 
  36.             System.out.println("----获得省的方法出现异常:" + e); 
  37.             e.printStackTrace(); 
  38.             return null; 
  39.         } finally { 
  40.             if (rs != null && stmt != null && conn != null) { 
  41.                 rs.close(); 
  42.                 stmt.close(); 
  43.                 conn.close(); 
  44.             } 
  45.         } 
  46.     } 
  47.     // 根据parentid获得其下所对应的记录 
  48.     public Map getChildByParentId(String id) throws SQLException { 
  49.         Map map = new HashMap(); 
  50.         String sql = "select * from province as p where p.parentid =" + id; 
  51.         try { 
  52.             conn = DBManager.getConnection(); 
  53.             stmt = conn.createStatement(); 
  54.             rs = stmt.executeQuery(sql); 
  55.             while (rs.next()) { 
  56.                 map.put(rs.getInt("id"), rs.getString("name")); 
  57.             } 
  58.             return map; 
  59.         } catch (Exception e) { 
  60.             System.out.println("----根据父id获得子记录的方法出现异常:" + e); 
  61.             e.printStackTrace(); 
  62.             return null; 
  63.         } finally { 
  64.             if (rs != null && stmt != null && conn != null) { 
  65.                 rs.close(); 
  66.                 stmt.close(); 
  67.                 conn.close(); 
  68.             } 
  69.         } 
  70.     } 
  71. } 

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代码如下：
Java 代码

   1. <%@ page language="java" pageEncoding="GB2312"%> 
   2. <%@ taglib uri="/WEB-INF/c.tld" prefix="c"%> 
   3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   4. <html> 
   5.   <head> 
   6.     <title> 省市县三级联动</title> 
   7.     <script type="text/javascript" src="dwr/interface/province.js"></script> 
   8.     <script type="text/javascript" src="dwr/engine.js"></script> 
   9.     <script type="text/javascript" src="dwr/util.js"></script> 
  10.     <script language="javascript"> 
  11.     // 根据选择的省,获得其所辖的市 
  12.         function getCity(){ 
  13.             var obj_Pro = document.getElementById("sel_Pro"); 
  14.             var obj_City = document.getElementById("sel_City"); 
  15.             var obj_County = document.getElementById("sel_County"); 
  16.             var pro_Index = obj_Pro.selectedIndex; 
  17.             var pro_Value = obj_Pro.options[pro_Index].value; 
  18.             if(pro_Value != "" && pro_Value != null){ 
  19.                 province.getChild(pro_Value,cityReturn); 
  20.             }else{ 
  21.                 DWRUtil.removeAllOptions(obj_City); 
  22.                 DWRUtil.addOptions(obj_City,{'':'请选择'}); 
  23.                 DWRUtil.removeAllOptions(obj_County); 
  24.                 DWRUtil.addOptions(obj_County,{'':'请选择'}); 
  25.             } 
  26.         } 
  27.     // 回调函数 
  28.         function cityReturn(data){ 
  29.             var obj_City = document.getElementById("sel_City"); 
  30.             DWRUtil.removeAllOptions(obj_City); 
  31.             DWRUtil.addOptions(obj_City,{'':'请选择'}); 
  32.             DWRUtil.addOptions(obj_City,data); 
  33.         } 
  34.     // 根据选择的市,获得所辖的县 
  35.         function getCounty(){ 
  36.             var obj_Pro = document.getElementById("sel_Pro"); 
  37.             var obj_City = document.getElementById("sel_City"); 
  38.             var obj_County = document.getElementById("sel_County"); 
  39.             var city_Index = obj_City.selectedIndex; 
  40.             var city_Value = obj_City.options[city_Index].value; 
  41.             if(city_Value != "" && city_Value != null){ 
  42.                 province.getChild(city_Value,countyReturn); 
  43.             }else{ 
  44.                 DWRUtil.removeAllOptions(obj_County); 
  45.                 DWRUtil.addOptions(obj_County,{'':'请选择'}); 
  46.             } 
  47.         } 
  48.     // 回调函数 
  49.         function countyReturn(data){ 
  50.             var obj_County = document.getElementById("sel_County"); 
  51.             DWRUtil.removeAllOptions(obj_County); 
  52.             DWRUtil.addOptions(obj_County,{'':'请选择'}); 
  53.             DWRUtil.addOptions(obj_County,data); 
  54.         } 
  55.     </script> 
  56.   </head> 
  57.   <body> 
  58.   <br /><br /> 
  59.   <div align="center"><font color="red">省市县三级联动</font></div> 
  60.   <br /> 
  61.    <table align="center"> 
  62.      <tbody> 
  63.         <tr> 
  64.             <td> 省:</td> 
  65.             <td> 
  66.                 <select id="sel_Pro" onchange="getCity()"> 
  67.                     <option value="">请选择</option> 
  68.                     <c:forEach items="${map}" var="hashMap"> 
  69.                         <option value="<c:out value='${hashMap.key}' />"><c:out value="${hashMap.value}" /></option> 
  70.                     </c:forEach> 
  71.                 </select> 
  72.             </td> 
  73.             <td> 市:</td> 
  74.             <td> 
  75.                 <select id="sel_City" onchange="getCounty()"> 
  76.                     <option value="">请选择</option> 
  77.                 </select> 
  78.             </td> 
  79.             <td> 县:</td> 
  80.             <td> 
  81.                 <select id="sel_County"> 
  82.                     <option value="">请选择</option> 
  83.                 </select> 
  84.             </td> 
  85.         </tr> 
  86.      </tbody> 
  87.    </table> 
  88.   </body> 
  89. </html> 
分享到：
| DWR3-ReverseAjax-半推实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

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

    DWR实现三级联动.pdf

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

    省市县三级联动

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

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

    在这个场景中，"java_DWR递归函数实现城市的省市县三级联动" 提供了一个利用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（模型-视图-控制器）框架...

Magicbox
Global site tag (gtag.js) - Google Analytics