jquery + servlet实现省市联动二级菜单

youzhibing

浏览: 51014 次
性别:

最近访客更多访客>>

GeBron

shun_liu

www.dcx

homeJYH

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

jquery ajax servlet 省市二级联动

通过jquery的ajax实现省市二级联动菜单
前提：有jquery.ajax基础、对servlet熟悉、有数据库基础
原理：加载页面时向数据库获取所有的省展示在select元素中，当用户选中某个省份时，向服务器发送ajax请求，获取对应省份下的城市
1、html页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级联动菜单</title>
<script src="js/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(function(){  //等待DOM加载完毕.
		var province = jQuery("#province");
		var city = jQuery("#city");
		getProvince();
		province.change(function(){
			getCity(province.val());	//参数是选择框选中的value
			//jQuery("#oppro").attr("disabled","true");
		});
		})
	});
	
	function getProvince(){
		jQuery.ajax({
				type: "post",
				url: "data",
				data:{param:"province"},
				success: function(data){
					var pros =(new Function("","return "+data))();
					for(var i=0;i<pros.data.length;i++){
						jQuery("#province").append("<option value="+(i+1)+">" + pros.data[i] + "</option>");
					}
				}
		});
	}
	function getCity(provinceValue){
		if("0" == provinceValue){
			jQuery("#city").empty();
			jQuery("#city").append("<option value='0'>请选择城市</option>");
		}else{
			jQuery.ajax({
					type: "post",
					url: "data",
					data:{param:"city",optionValue:provinceValue},
					success: function(data){
						var citys =(new Function("","return "+data))();
						jQuery("#city").empty();
						jQuery("#city").append("<option value='0'>请选择城市</option>");
						for(var i=0;i<citys.data.length;i++){
							jQuery("#city").append("<option value="+(i+1)+">" + citys.data[i] + "</option>");
						}
					}
			});
		}
	}
</script>
</head>
<body>
		<form id="form1">
			<select id="province">
				<option value="0" id="oppro">请选择省份:</option>
			</select>
			<select id="city">
				<option value="0" id="opcity">请选择城市:</optio
			</select>	
		</form>

</body>
</html>

html页面主要是jquery的ajax，至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息，这些问题在我的http://youzhibing.iteye.com/admin/blogs/1636755这篇博客中有提到，原理是一样的
2、服务器端：servlet

@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		String param = req.getParameter("param");
		ResultSet rs = null;
		
		//取得省份列表
		if("province".equals(param)){
			try {
				rs = getPreparedStatement().executeQuery();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		//取得城市列表
		if("city".equals(param)){
			int optionValue = Integer.parseInt(req.getParameter("optionValue"));
			try {
				rs = getPreparedStatement(optionValue).executeQuery();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		
		//返回数据给页面
		String data="{data:[";
		try {
			while(rs.next()){
				data += "\"" + rs.getString(2) + "\",";
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		data = data.substring(0, data.lastIndexOf(',')) + "]}";
		resp.setContentType("text/html;charset=gb2312");   
		resp.setCharacterEncoding("gb2312");// 防止弹出的信息出现乱码
		resp.getWriter().write(data);
	}

配置文件：web.xml

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
  	<servlet-name>data</servlet-name>	
  	<servlet-class>com.province.city.DataFromMysql</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>data</servlet-name>
	<url-pattern>/data</url-pattern>
  </servlet-mapping>

有问题、有意见都可以给我留言哦！
下面提供了myeclipse下的项目的压缩文件

ProvinceAndCitys.rar (960.6 KB)
下载次数: 145

2
顶

0
踩

分享到：

css中position | jdbc创建与调用存储过程

2012-09-02 09:14
浏览 8083
评论(2)
分类:Web前端
查看更多

2 楼 youzhibing 2012-09-11

杀客o凹胖写道

你那个 append还是写在servlet中比较好，直接返回一个字符串就行了

确实有道理，谢谢了

1 楼杀客o凹胖 2012-09-03

你那个 append还是写在servlet中比较好，直接返回一个字符串就行了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论