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

最新推荐文章于 2022-05-22 20:00:05 发布

youzhibing01

最新推荐文章于 2022-05-22 20:00:05 发布

阅读量328

点赞数 1

分类专栏： web前端文章标签： jquery ajax servlet 省市二级联动 ViewUI

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

[b]通过jquery的ajax实现省市二级联动菜单[/b]
前提：有jquery.ajax基础、对servlet熟悉、有数据库基础
[b]原理：加载页面时向数据库获取所有的省展示在select元素中，当用户选中某个省份时，向服务器发送ajax请求，获取对应省份下的城市[/b]
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，至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息，这些问题在我的[url]http://youzhibing.iteye.com/admin/blogs/1636755[/url]这篇博客中有提到，原理是一样的
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下的项目的压缩文件

youzhibing01

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jquery + servlet实现省市联动二级菜单

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

扫一扫

专栏目录