`
youzhibing
  • 浏览: 51094 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jquery + 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下的项目的压缩文件
2
0
分享到:
评论
2 楼 youzhibing 2012-09-11  
杀客o凹胖 写道
你那个 append还是写在servlet中比较好,直接返回一个字符串就行了

确实 有道理,谢谢了
1 楼 杀客o凹胖 2012-09-03  
你那个 append还是写在servlet中比较好,直接返回一个字符串就行了

相关推荐

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中,如...

    jQuery+ASP+SQL实现二级联动下拉菜单

    jQuery+ASP+SQL实现二级联动下拉菜单 全国省市数据库可以从网上Down个合适的导入一下就可以了. /**************************** * Author:蓝客密探 * Blog:www.lanke.me * Forum:www.phpdn.cn 详细介绍页面:...

    前端jquery+后端servlet实现三级联动项目省市区

    这个项目“前端jquery+后端servlet实现三级联动项目省市区”就是一个典型的案例,它展示了如何利用jQuery在前端处理用户交互,以及如何通过Servlet在后端进行数据处理和传输。下面我们将详细探讨这个项目中的关键...

    php+mysql+jquery省市区三级联动

    本项目“php+mysql+jquery省市区三级联动”是实现这一功能的一个实例,结合了后端PHP、数据库MySQL以及前端jQuery技术,提供了一个完整的解决方案。 首先,我们来看前端部分,这里使用的是jQuery库。jQuery是一个...

    基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...

    jquery+css实现的简洁二级网站菜单

    "jquery+css实现的简洁二级网站菜单"这个项目展示了如何利用这两种强大的技术来创建一个高效且易于导航的网页菜单。jQuery,一个JavaScript库,简化了DOM操作、事件处理以及动画效果;而CSS则负责页面的样式和布局。...

    ssh+jquery+ajax二级联动

    在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...

    AJAX学习笔记----jquery+servlet实现用户名验证

    NULL 博文链接:https://persistc.iteye.com/blog/264072

    使用CSS+jQuery实现的水平二级菜单

    "使用CSS+jQuery实现的水平二级菜单"是一个常见的技术实践,它结合了层叠样式表(CSS)的样式控制与JavaScript库jQuery的动态效果,以实现优雅且功能丰富的菜单系统。下面将详细介绍这个主题中的相关知识点。 首先...

    Ajax + jQuery + json + js + jsp + servlet 三级联动

    在IT行业中,"三级联动"是一种常见的前端交互设计,它通常应用于下拉选择框或级联菜单中。这种设计能够帮助用户在多个关联的选择项之间建立逻辑关系,以过滤和展示相关数据。在这个项目中,"Ajax + jQuery + json + ...

    Struts2+jQuery+ajax+mySql实现省市二级联动

    总的来说,结合Struts2、jQuery、ajax和MySQL,我们可以实现高效、流畅的省市二级联动效果,提供用户友好的Web界面。这四个技术的协同工作展示了现代Web开发中前后端交互的基本模式,对于任何想要学习Web开发的人来...

    “省市联动”小案例源码(JQuery+Servlet实现).rar

    本案例主要展示了如何使用JQuery和Servlet来实现“省市联动”的功能,这是一种常见的前端与后端交互的应用场景,尤其在地址选择或者填写表单时经常遇到。AJAX(Asynchronous JavaScript and XML)技术在此中扮演了...

    Sql+Jquery+Ajax实现省市县区无刷新动态联动查询

    在IT领域,尤其是在Web开发中,"Sql+Jquery+Ajax实现省市县区无刷新动态联动查询"是一个常见的需求,它涉及到数据库操作、前端交互以及页面动态更新等多个关键环节。以下将详细介绍这一技术栈的工作原理及实现方法。...

    省市县三级连动三种实现方式(javascript+jsp+servlet)、(jquery+jsp+servlet)、(extjs4.0+jsp+servle)

    在实际开发中,这三种方法都可以实现省市县三级联动的功能,但复杂度和性能各有差异。JavaScript和jQuery实现相对简单,适合小规模项目;而ExtJS4.0则更适合大型企业级应用,提供更强大的功能和更好的用户体验,但...

    php+jquery+mysql城市三级联动

    以下是关于"php+jquery+mysql城市三级联动"的知识点详解: 1. PHP:PHP(Hypertext Preprocessor)是一种广泛使用的开源脚本语言,尤其适用于Web开发,可以嵌入到HTML中。在这个项目中,PHP主要负责后端逻辑处理,...

    jquery+ajax实现省市区三级联动 (封装和不封装两种方式).zip

    "jquery+ajax实现省市区三级联动"是一种常见的技术方案,用于在网页上动态地展示和选择省级、市级、区级的联动下拉菜单。这种功能在注册、地址填写等场景中非常常见。本项目提供了两种实现方式:封装和不封装。 1. ...

    jquery+php+mysql省市县Ajax三级联动代码

    这个"jquery+php+mysql省市县Ajax三级联动代码"是实现这种功能的一个实例,结合了前端JavaScript库jQuery、后端PHP编程语言以及MySQL数据库。下面我们将详细探讨这个技术组合在实现三级联动中的应用。 首先,jQuery...

Global site tag (gtag.js) - Google Analytics