DWR实现省市级联

项目部署为：

数据库SQL代码为：

--省级   provincial  

[sql] view plain copy print ?

1. create table provincial (  
2. provincialID int,  
3. provincialName varchar(50),  
4. primary key (provincialID)  
5. )engine=INNODB default charset=gb2312;  

create table provincial ( 
provincialID int, 
provincialName varchar(50), 
primary key (provincialID) 
)engine=INNODB default charset=gb2312; 

--城市   city

[sql] view plain copy print ?

1. create table city (  
2. cityID int not null,  
3. cityName varchar(50) not null,  
4. provincialID int not null,  
5. primary key (cityID)  
6. )engine=INNODB default charset=gb2312;  

create table city ( 
cityID int not null, 
cityName varchar(50) not null, 
provincialID int not null, 
primary key (cityID) 
)engine=INNODB default charset=gb2312; 

详细数据库代码如下链接：

http://download.youkuaiyun.com/detail/aigochina/4649480

下面的代码用于与数据库实现映射：
City.java类代码：(城市)

[java] view plain copy print ?

1. public class City { 
2.     private int cityID; 
3.     public int getCityID() { 
4.         return cityID; 
5.     } 
6.     public void setCityID(int cityID) { 
7.         this.cityID = cityID; 
8.     } 
9.     public String getCityName() { 
10.         return cityName; 
11.     } 
12.     public void setCityName(String cityName) { 
13.         this.cityName = cityName; 
14.     } 
15.     public int getProvincialID() { 
16.         return provincialID; 
17.     } 
18.     public void setProvincialID(int provincialID) { 
19.         this.provincialID = provincialID; 
20.     } 
21.     private String cityName; 
22.     private int provincialID; 
23. } 

public class City {
	private int cityID;
	public int getCityID() {
		return cityID;
	}
	public void setCityID(int cityID) {
		this.cityID = cityID;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	public int getProvincialID() {
		return provincialID;
	}
	public void setProvincialID(int provincialID) {
		this.provincialID = provincialID;
	}
	private String cityName;
	private int provincialID;
}

Province.java类代码：(省)

[java] view plain copy print ?

1. public class Province { 
2.     private int provincialID; 
3.     public int getProvincialID() { 
4.         return provincialID; 
5.     } 
6.     public void setProvincialID(int provincialID) { 
7.         this.provincialID = provincialID; 
8.     } 
9.     public String getProvincialName() { 
10.         return provincialName; 
11.     } 
12.     public void setProvincialName(String provincialName) { 
13.         this.provincialName = provincialName; 
14.     } 
15.     private String provincialName; 
16. } 

public class Province {
	private int provincialID;
	public int getProvincialID() {
		return provincialID;
	}
	public void setProvincialID(int provincialID) {
		this.provincialID = provincialID;
	}
	public String getProvincialName() {
		return provincialName;
	}
	public void setProvincialName(String provincialName) {
		this.provincialName = provincialName;
	}
	private String provincialName;
}

CityDao.java类代码：(实现与数据库操作)

[java] view plain copy print ?

1. import java.sql.Connection; 
2. import java.sql.PreparedStatement; 
3. import java.sql.ResultSet; 
4. import java.sql.SQLException; 
5. import java.util.ArrayList; 
6. import java.util.List; 
7.  
8. public class CityDao { 
9.     Connection conn=null; 
10.     PreparedStatement pre=null; 
11.     ResultSet res; 
12.     //根据省份ID来获得相对应的城市信息 
13.     public List<City> getCity(int provincialID){ 
14.         List<City> cityList=new ArrayList<City>(); 
15.         String sql="SELECT * FROM city WHERE provincialID=?"; 
16.         conn=new Basedao().getConnection(); 
17.         try { 
18.             pre=conn.prepareStatement(sql); 
19.             pre.setInt(1,provincialID); 
20.             res=pre.executeQuery(); 
21.             while(res.next()){ 
22.                 City city=new City(); 
23.                 city.setCityID(res.getInt("cityID")); 
24.                 city.setCityName(res.getString("cityName")); 
25.                 city.setProvincialID(res.getInt("provincialID")); 
26.                 cityList.add(city); 
27.             } 
28.         } catch (SQLException e) { 
29.             e.printStackTrace(); 
30.         } 
31.          
32.          
33.         return cityList; 
34.     } 
35.      
36.     //获得所有的省份列表 
37.     public List<Province> getProvince(){ 
38.         List<Province> proList=new ArrayList<Province>(); 
39.         String sql="SELECT * FROM provincial"; 
40.         conn=new ConnectDB().getConnection(); 
41.         try { 
42.             pre=conn.prepareStatement(sql); 
43.             res=pre.executeQuery(); 
44.             while(res.next()){ 
45.                 Province pro=new Province(); 
46.                 pro.setProvincialID(res.getInt("provincialID")); 
47.                 pro.setProvincialName(res.getString("provincialName")); 
48.                 proList.add(pro); 
49.             } 
50.         } catch (SQLException e) { 
51.             e.printStackTrace(); 
52.         } 
53.          
54.         return proList; 
55.     } 
56. } 

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class CityDao {
	Connection conn=null;
	PreparedStatement pre=null;
	ResultSet res;
	//根据省份ID来获得相对应的城市信息
	public List<City> getCity(int provincialID){
		List<City> cityList=new ArrayList<City>();
		String sql="SELECT * FROM city WHERE provincialID=?";
		conn=new Basedao().getConnection();
		try {
			pre=conn.prepareStatement(sql);
			pre.setInt(1,provincialID);
			res=pre.executeQuery();
			while(res.next()){
				City city=new City();
				city.setCityID(res.getInt("cityID"));
				city.setCityName(res.getString("cityName"));
				city.setProvincialID(res.getInt("provincialID"));
				cityList.add(city);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		
		return cityList;
	}
	
	//获得所有的省份列表
	public List<Province> getProvince(){
		List<Province> proList=new ArrayList<Province>();
		String sql="SELECT * FROM provincial";
		conn=new ConnectDB().getConnection();
		try {
			pre=conn.prepareStatement(sql);
			res=pre.executeQuery();
			while(res.next()){
				Province pro=new Province();
				pro.setProvincialID(res.getInt("provincialID"));
				pro.setProvincialName(res.getString("provincialName"));
				proList.add(pro);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return proList;
	}
}

ConnectDB.java代码（用于实现数据库连接）

[java] view plain copy print ?

1. public class ConnectDB { 
2.     public Connection conn=null; 
3.     private String url="jdbc:mysql://localhost:3306/test"; 
4.     private String user="root"; 
5.     private String password="lovemu"; 
6.     public Connection getConnection(){ 
7.         try { 
8.             Class.forName("com.mysql.jdbc.Driver"); 
9.             conn=DriverManager.getConnection(url, user, password); 
10.         } catch (ClassNotFoundException e) { 
11.             e.printStackTrace(); 
12.         } catch (SQLException e) { 
13.             e.printStackTrace(); 
14.         } 
15.         return conn; 
16.     } 
17. } 

public class ConnectDB {
	public Connection conn=null;
	private String url="jdbc:mysql://localhost:3306/test";
	private String user="root";
	private String password="lovemu";
	public Connection getConnection(){
		try {
			Class.forName("com.mysql.jdbc.Driver");
			conn=DriverManager.getConnection(url, user, password);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}
}

dwr.xml代码如下：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?> 
2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> 
3. <dwr> 
4. <allow> 
5. <create creator="new" javascript="province"> 
6. <param name="class" value="dao.CityDao"></param> 
7. </create> 
8. <convert converter="bean" match="dao.Province"></convert> 
9. <convert converter="bean" match="dao.City"></convert> 
10. </allow> 
11. </dwr> 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="province">
<param name="class" value="dao.CityDao"></param>
</create>
<convert converter="bean" match="dao.Province"></convert>
<convert converter="bean" match="dao.City"></convert>
</allow>
</dwr>

实现省市级联的页面代码：

[html] view plain copy print ?

1. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 
2. <% 
3. String path = request.getContextPath(); 
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
5. %> 
6.  
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
8. <html> 
9.   <head> 
10.     <base href="<%=basePath%>"> 
11.      
12.     <title>My JSP 'index.jsp' starting page</title> 
13.     <meta http-equiv="pragma" content="no-cache"> 
14.     <meta http-equiv="cache-control" content="no-cache"> 
15.     <meta http-equiv="expires" content="0">     
16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
17.     <meta http-equiv="description" content="This is my page"> 
18.       <script type='text/javascript' src='/DWR/dwr/engine.js'></script> 
19.   <script type='text/javascript' src='/DWR/dwr/interface/province.js'></script> 
20.      <script type='text/javascript' src='/DWR/dwr/util.js'></script> 
21.  
22.   </head> 
23.   <body onload="getPro();"> 
24.     所在地：<select onchange="getCity();" id="provicial" name="province"></select><select id="city" name="city"></select> 
25.  
26.   </body> 
27.          <script type="text/javascript"> 
28.  
29.             //获得省份列表 
30.             function getPro() { 
31.                 province.getProvince(callPro); 
32.             } 
33.             //城市返回函数 
34.             function callPro(data) { 
35.                 var provical = document.getElementById("provicial"); 
36.                 provical.innerHTML = "";//如果有值就清空 
37.                 provical.add(new Option('请选择', '')); 
38.                 for ( var i = 0; i < data.length; i++) {//循环添加省份下拉列表 
39.                     provicial.add(new Option(data[i].provincialName, 
40.                             data[i].provincialID)); 
41.                 } 
42.             } 
43.             //根据省份ID获取相对应的城市列表 
44.             function getCity() { 
45.                 var city = document.getElementById("provicial").value; 
46.                 //获得省份下拉列表的值 
47.                 province.getCity(city, callCity); 
48.             } 
49.             function callCity(data) { 
50.                 var city = document.getElementById("city");//将城市下拉列表清空 
51.                 city.innerHTML = ""; 
52.                 city.add(new Option('请选择', '')); 
53.                 for ( var i = 0; i < data.length; i++) {//循环添加城市下拉列表 
54.                     city.add(new Option(data[i].cityName, data[i].cityID)); 
55.                 } 
56.             } 
57.         </script> 
58. </html> 

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	  <script type='text/javascript' src='/DWR/dwr/engine.js'></script>
  <script type='text/javascript' src='/DWR/dwr/interface/province.js'></script>
	 <script type='text/javascript' src='/DWR/dwr/util.js'></script>

  </head>
  <body onload="getPro();">
    所在地：<select onchange="getCity();" id="provicial" name="province"></select><select id="city" name="city"></select>

  </body>
      	 <script type="text/javascript">

			//获得省份列表
			function getPro() {
				province.getProvince(callPro);
			}
			//城市返回函数
			function callPro(data) {
				var provical = document.getElementById("provicial");
				provical.innerHTML = "";//如果有值就清空
				provical.add(new Option('请选择', ''));
				for ( var i = 0; i < data.length; i++) {//循环添加省份下拉列表
					provicial.add(new Option(data[i].provincialName,
							data[i].provincialID));
				}
			}
			//根据省份ID获取相对应的城市列表
			function getCity() {
				var city = document.getElementById("provicial").value;
				//获得省份下拉列表的值
				province.getCity(city, callCity);
			}
			function callCity(data) {
				var city = document.getElementById("city");//将城市下拉列表清空
				city.innerHTML = "";
				city.add(new Option('请选择', ''));
				for ( var i = 0; i < data.length; i++) {//循环添加城市下拉列表
					city.add(new Option(data[i].cityName, data[i].cityID));
				}
			}
		</script>
</html>

其中所引用的js代码

[javascript] view plain copy print ?

1. <script type='text/javascript' src='/DWR/dwr/engine.js'></script> 
2. <script type='text/javascript' src='/DWR/dwr/interface/province.js'></script> 

<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
<script type='text/javascript' src='/DWR/dwr/interface/province.js'></script>

[javascript] view plain copy print ?

1. <script type='text/javascript' src='/DWR/dwr/util.js'></script> 

<script type='text/javascript' src='/DWR/dwr/util.js'></script>

来自以下页面：

运行后,在浏览器地址栏输入：http://localhost:8080/DWR/dwr

页面如下：

点击黄颜色部分，进入页面：

上面的javascrip代码即为红色框内的内容。

最后，运行项目，运行结果为：

 

以上内容转自网络：http://blog.youkuaiyun.com/aigochina/article/details/8074178