DWR实现省市县三级联动

数据库的大概设计是，共有三个字段[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" οnchange="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" οnchange="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>