DWR实现省市级联

项目部署为：
--省级 provincial
[sql] view plain copy print ?
create table provincial (
provincialID int,
provincialName varchar(50),
primary key (provincialID)
)engine=INNODB default charset=gb2312;
create table provincial ( 
provincialID int,provincialName varchar(50),primary key (provincialID) 
)engine=INNODB default charset=gb2312; @H_403_65@ 

 --城市 city 
 
  
   
   [sql] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  create table city (  
  cityID int not null, 
  cityName varchar(50)  not null,  
  provincialID int not null, 
  primary key (cityID)  
  )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; @H_403_65@ 
详细数据库代码如下链接： 
http://download.csdn.net/detail/aigochina/4649480 
下面的代码用于与数据库实现映射：
 City.java类代码：(城市) 
 
  
   
   [java] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  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;  
  }  
  
 
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;
}@H_403_65@ 

  
Province.java类代码：(省) 
 
  
   
   [java] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  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;  
  }  
  
 
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;
}
@H_403_65@ 

  
CityDao.java类代码：(实现与数据库操作) 
 
  
   
   [java] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  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;  
   }  
  }  
  
 
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;
	}
}@H_403_65@ 

  
ConnectDB.java代码（用于实现数据库连接） 
 
  
   
   [java] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  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;   
   }  
  }  
  
 
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,password);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (sqlException e) {
			e.printStackTrace();
		}
		return conn;
	}
}
@H_403_65@ 

 dwr.xml代码如下： 
 
  
   
   [html] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  <?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>  
  
 
<?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>@H_403_65@ 
 
实现省市级联的页面代码： 
 
  
   
   [html] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  <%@ 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>  
  
 
<%@ 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,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>
@H_403_65@ 
其中所引用的js代码 
 
  
   
   [javascript] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  <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/engine.js'></script>
<script type='text/javascript' src='/DWR/dwr/interface/province.js'></script>@H_403_65@ 
 
  
   
   [javascript] 
    view plain 
   copy 
   print 
   ? 
   
  
  
  <script type='text/javascript' src='/DWR/dwr/util.js'></script>  
  
 
<script type='text/javascript' src='/DWR/dwr/util.js'></script>
@H_403_65@ 
来自以下页面： 
运行后,在浏览器地址栏输入：http://localhost:8080/DWR/dwr 
页面如下： 
 
点击黄颜色部分，进入页面： 
 
上面的javascrip代码即为红色框内的内容。 
最后，运行项目，运行结果为： 
 
 
以上内容转自网络：http://www.jb51.cc/article/p-xulcmrly-qz.html
DWR实现省市级联

猜你在找的Ajax相关文章
