`
txf2004
  • 浏览: 6875812 次
  • 性别: 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代码即为红色框内的内容。

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


分享到:
评论

相关推荐

    冒险岛群聊机器人 蠢猫(无视计算 星之力计算 世界组队表 占卜 怪物查询).zip

    无人机最强算法源码,易于部署和学习交流使用

    node-v8.14.1-linux-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    HostelDataset(been personally processed)

    此数据集主要是一个跟酒店类型有关的数据集,源于kaggle网站上的Guatemalas_Travel数据集,因设计所需,本人对原来的数据集进行了必要的修改。

    3D相册.zip

    3D相册.zip

    中国统计NJ面板数据-(更新至2022年)平均每天能源消费量.xls

    数据来源:中国统计NJ-2023版

    3dmax空对象清除器下载

    3dmax空对象清除器,在场景中找到空对象,向你显示这些对象的列表,并允许你从场景中删除它们。

    node-v10.13.0-linux-s390x.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    中国统计NJ面板数据-(更新至2022年)入境外国游客分组构成.xls

    数据来源:中国统计NJ-2023版

    数据要素资产化与数据资产入表路线框架总体规划方案.pptx

    数据要素资产化与数据资产入表路线框架总体规划方案.pptx

    用户手册 8100C/8200C/8300C系列无功补偿装置

    施耐德电气 8100C 8200C 8300C 用户手册

    毫无特色的 QQ 机器人.zip

    无人机最强算法源码,易于部署和学习交流使用

    员工培训方案gl.ppt

    员工培训方案gl.ppt

    infrared-remote-controller-master

    旅行商问题

    小米扫地机器人工程源码程序STM32103 freeRTOS设计源代码.zip

    小米扫地机器人工程源码程序STM32103 freeRTOS设计源代码,某米早起的扫地机器人的源码,使用的是STM32开发,freeRTOS系统,包含完整的工程源码,可以做为你的学习设计参考。 HARDWARE文件夹 硬件初始化源文件 application_Robot 机器人行为相关的文件 application_Share 机器人共享相关的文件(一般为算法) application_Motor 机器人电机应用相关文件 application_Key 机器人按键应用相关文件 application_Led 机器人LED应用相关文件 application_Led 机器人adc获取与处理应用相关文件 application_PowerChip 机器人电池管理芯片与充电应用相关文件 application_Bmi160 机器人BMI160 陀螺仪芯片 应用相关文件 application_Drop 机器人掉落传感器应用相关文件 application_UltraSonic 机器人超声波传感器应用相关文件 appl

    39黎秋菊.ipynb

    39黎秋菊.ipynb

    node-v11.14.0-linux-armv7l.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    域名注册查询的微信小程序页面源码

    模板描述:域名注册查询 微信小程序。域名注册查询的微信小程序页面源码是使用微信WEB开发者工具开发,亲测可直接运行。该程序从设计上满足了相关应用服务的设计要求,是一款非常值得学习简介的DEMO小程序源码。

    水下机器人无线充电上位机.zip

    无人机最强算法源码,易于部署和学习交流使用

    DCS 400系列可控硅直流传动系统手册

    DCS 400 手册

    node-v11.15.0-linux-armv6l.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics