`
txf2004
  • 浏览: 6866014 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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代码即为红色框内的内容。

最后,运行项目,运行结果为:


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics