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;

--城市 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;

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

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;
}

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;
}

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;
	}
}

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;
	}
}

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>

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

[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>

其中所引用的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>

[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>

来自以下页面：

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

页面如下：

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

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

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

以上内容转自网络：http://www.jb51.cc/article/p-xulcmrly-qz.html

DWR实现省市级联

猜你在找的Ajax相关文章