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

youzhibing · 发表于 2013-1-29 10:31:09

通过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 + "</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 + "</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
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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下的项目的压缩文件

		自动登录	找回密码
密码			立即注册