DWR实现省市级联
项目部署为：
数据库SQL代码为：
--省级 provincial
create table provincial ( provincialID int, provincialName varchar(50), primary key (provincialID) )engine=INNODB default charset=gb2312;
--城市 city
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.csdn.net/detail/aigochina/4649480
下面的代码用于与数据库实现映射：
City.java类代码：(城市)
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类代码：(省)
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类代码：(实现与数据库操作)
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代码（用于实现数据库连接）
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代码如下：
<?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>
实现省市级联的页面代码：
<%@ 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代码
<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>
来自以下页面：
运行后,在浏览器地址栏输入：http://localhost:8080/DWR/dwr
页面如下：
点击黄颜色部分，进入页面：
上面的javascrip代码即为红色框内的内容。
最后，运行项目，运行结果为：
