`

Ajax 实现级联菜单

ajaxcache 
阅读更多

自己动手实现的一个Ajax级联菜单，开发平台：Eclipse，数据库：MySQL。数据库设计如下图所示：

 

 

 

1. 前台实现：

 

Html代码 复制代码 收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ page import="java.sql.*,java.io.*"%>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8. <title>Ajax级联菜单实现</title>  
  9. <script language="JavaScript" type="text/javascript">  
  10. <!--   
  11. var cache = [];   
  12. function getLevel2(){   
  13.     if(document.forms.LevelMenu.select1.selectedIndex == 0){   
  14.         //当一级菜单未被选中时，二级菜单保持初始状态   
  15.         document.forms.LevelMenu.select2.length = 1;   
  16.         return;   
  17.     }   
  18.     //如果当前二级分类没有缓存时，则从服务器获取数据   
  19.     if(!cache[document.forms.LevelMenu.select1.selectedIndex]){   
  20.         //创建跨浏览器的XMLHttpRequest对象   
  21.     var xmlhttp;   
  22.     try{   
  23.     //IE 5.0    
  24.         xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');   
  25.     }catch(e){   
  26.         try{   
  27.         //IE 5.5 及更高版本   
  28.             xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');   
  29.         }catch(e){   
  30.             try{   
  31.             //其他浏览器   
  32.                 xmlhttp = new XMLHttpRequest();   
  33.             }catch(e){}   
  34.         }   
  35.     }   
  36.     xmlhttp.open("get","ShowTwoMenu.jsp?id="+document.forms.LevelMenu.select1.value);   
  37.     xmlhttp.onreadystatechange = function(){   
  38.         if(xmlhttp.readyState == 4){   
  39.             if(xmlhttp.status == 200){   
  40.                 cache[document.forms.LevelMenu.select1.selectedIndex] = eval("("+xmlhttp.responseText+")");   
  41.                 getLevel2();   
  42.             }   
  43.         }   
  44.     }   
  45.     xmlhttp.send(null);   
  46.     return;   
  47.     }   
  48.     document.forms.LevelMenu.select2.length = 1;   
  49.     var _arr = cache[document.forms.LevelMenu.select1.selectedIndex];   
  50.     for (var i=0; i<_arr.length-1; i+=2){   
  51.         with(document.forms.LevelMenu.select2){   
  52.             options[options.length] = new Option(_arr[i], _arr[i+1]);   
  53.         }   
  54.     }   
  55. }   
  56. //-->  
  57. </script>  
  58. </head>  
  59. <body>  
  60. <%   
  61.     //驱动器名   
  62.     //数据库用户名和密码   
  63.     String userName = "root";   
  64.     String userPasswd = "1984428";   
  65.     //需要连接的数据库名   
  66.     String dbName = "studyajax";   
  67.     //表名   
  68.     String tableName = "articleType";   
  69.     //创建连接并执行查询操作   
  70.     Class.forName("com.mysql.jdbc.Driver").newInstance();   
  71.     Connection conn = DriverManager.getConnection(   
  72.             "jdbc:mysql://localhost:3306/" + dbName, userName,   
  73.             userPasswd);   
  74.     Statement statement = conn.createStatement();   
  75.     String sql = "SELECT * FROM " + tableName + " where level=0";   
  76.     ResultSet rs = statement.executeQuery(sql);   
  77. %>  
  78. <form name="LevelMenu"><select name="select1" id="select1"  
  79.     onchange="getLevel2()">  
  80.     <option value="0">请选择一级分类：</option>  
  81.     <%   
  82.         while (rs.next()) {   
  83.     %>  
  84.     <option value="<%=rs.getInt(1) %>"><%=rs.getString(2)%></option>  
  85.     <%   
  86.         }   
  87.         rs.close();   
  88.         statement.close();   
  89.         conn.close();   
  90.     %>  
  91. </select> <select name="select2" id="select2">  
  92.     <option value="0">请选择二级分类</option>  
  93. </select></form>  
  94.   
  95. </body>  
  96. </html>   
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,java.io.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax级联菜单实现</title>
<script language="JavaScript" type="text/javascript">
<!--
var cache = [];
function getLevel2(){
	if(document.forms.LevelMenu.select1.selectedIndex == 0){
		//当一级菜单未被选中时，二级菜单保持初始状态
		document.forms.LevelMenu.select2.length = 1;
		return;
	}
	//如果当前二级分类没有缓存时，则从服务器获取数据
	if(!cache[document.forms.LevelMenu.select1.selectedIndex]){
		//创建跨浏览器的XMLHttpRequest对象
	var xmlhttp;
	try{
	//IE 5.0 
		xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');
	}catch(e){
		try{
		//IE 5.5 及更高版本
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}catch(e){
			try{
			//其他浏览器
				xmlhttp = new XMLHttpRequest();
			}catch(e){}
		}
	}
	xmlhttp.open("get","ShowTwoMenu.jsp?id="+document.forms.LevelMenu.select1.value);
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4){
			if(xmlhttp.status == 200){
				cache[document.forms.LevelMenu.select1.selectedIndex] = eval("("+xmlhttp.responseText+")");
				getLevel2();
			}
		}
	}
	xmlhttp.send(null);
	return;
	}
	document.forms.LevelMenu.select2.length = 1;
	var _arr = cache[document.forms.LevelMenu.select1.selectedIndex];
	for (var i=0; i<_arr.length-1; i+=2){
		with(document.forms.LevelMenu.select2){
			options[options.length] = new Option(_arr[i], _arr[i+1]);
		}
	}
}
//-->
</script>
</head>
<body>
<%
	//驱动器名
	//数据库用户名和密码
	String userName = "root";
	String userPasswd = "1984428";
	//需要连接的数据库名
	String dbName = "studyajax";
	//表名
	String tableName = "articleType";
	//创建连接并执行查询操作
	Class.forName("com.mysql.jdbc.Driver").newInstance();
	Connection conn = DriverManager.getConnection(
			"jdbc:mysql://localhost:3306/" + dbName, userName,
			userPasswd);
	Statement statement = conn.createStatement();
	String sql = "SELECT * FROM " + tableName + " where level=0";
	ResultSet rs = statement.executeQuery(sql);
%>
<form name="LevelMenu"><select name="select1" id="select1"
	onchange="getLevel2()">
	<option value="0">请选择一级分类：</option>
	<%
		while (rs.next()) {
	%>
	<option value="<%=rs.getInt(1) %>"><%=rs.getString(2)%></option>
	<%
		}
		rs.close();
		statement.close();
		conn.close();
	%>
</select> <select name="select2" id="select2">
	<option value="0">请选择二级分类</option>
</select></form>

</body>
</html>

 

2. 后台代码实现

 

Html代码 复制代码 收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ page import="java.sql.*,java.io.*"%>  
  4. <%   
  5.     //数据库用户名和密码   
  6.     int id = Integer.parseInt(request.getParameter("id").trim());   
  7.     //System.out.println("id:"+id);   
  8.     String userName = "root";   
  9.     String userPasswd = "1984428";   
  10.     //需要连接的数据库名   
  11.     String dbName = "studyajax";   
  12.     //表名   
  13.     String tableName = "articletype";   
  14.     //创建连接并执行查询操作   
  15.     Class.forName("com.mysql.jdbc.Driver").newInstance();   
  16.     Connection conn = DriverManager.getConnection(   
  17.             "jdbc:mysql://localhost:3306/" + dbName, userName,   
  18.             userPasswd);   
  19.     Statement statement = conn.createStatement();   
  20.     String sql = "SELECT id, name FROM " + tableName   
  21.             + "  where level=1 and parentId=" + id;   
  22.     //System.out.println("sql:"+sql);   
  23.     ResultSet rs = statement.executeQuery(sql);   
  24.   
  25.     //获取数据结果集   
  26.     response.setContentType("text/html; charset=UTF-8");   
  27.     response.setHeader("Cache-Control", "no-cache");   
  28.     PrintWriter pout = null;   
  29.     pout = response.getWriter();   
  30.     pout.print("[");   
  31.     while (rs.next()) {   
  32.         try {   
  33.   
  34.             pout.print("'" + (rs.getString("name")) + "',");   
  35.             pout.print(rs.getString("id"));   
  36.             pout.print(",");   
  37.         } catch (Exception e) {   
  38.             e.printStackTrace();   
  39.         }   
  40.     }   
  41.     pout.print("0]");   
  42.     rs.close();   
  43.     statement.close();   
  44.     conn.close();   
  45. %>  
分享到：
| XML元素和结点的区别：
评论
发表评论

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

相关推荐

    Ajax实现级联菜单

    非常详细的一个级联菜单,很适合刚学ajax的朋友! 大家不懂的发送邮件给我,白天都在线! /** * js文件说明：实现 分公司--&gt;支公司--&gt;代理机构 三级下拉级联菜单 * 作者：朱亮&lt;/p&gt; * 版本： 1.0&lt;/p&gt; * 修改历史&lt;/p&gt; ...

    用AJAX实现的级联菜单

    在网页设计中，级联菜单（Cascading Menu）是一种常见的交互元素，它允许用户通过层级结构来选择或浏览选项。...通过学习和分析这些代码，我们可以加深对AJAX级联菜单实现的理解，并将其应用到自己的项目中。

    ajax实现级联菜单的类子

    本文将深入探讨如何使用Ajax来实现级联菜单，并结合数据库获取数据。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在不重新加载整个页面的情况下与服务器进行异步通信。...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...

    Ajax_实现级联菜单

    &lt;title&gt;Ajax级联菜单实现 &lt;!-- var cache = []; function getLevel2() { if (document.forms.LevelMenu.select1.selectedIndex == 0) { // 当一级菜单未被选中时，二级菜单保持初始状态 document.forms....

    Ajax-级联菜单

    在实现Ajax级联菜单时，通常涉及以下几个关键知识点： 1. **JavaScript/jQuery**：JavaScript是实现Ajax功能的主要语言，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。使用jQuery...

    级联菜单 动态级联菜单

    动态级联菜单的实现可以通过多种方式，例如使用javascript、JQuery、Ajax等技术。其中，使用javascript和服务器端脚本结合的方式是最为常见的。 在上面的代码中，我们可以看到使用了VBScript作为服务器端脚本语言，...

    AJAX实例的级联菜单

    在实现AJAX级联菜单时，主要步骤如下： 1. 创建HTML结构，包括两个或多个级联的下拉菜单。 2. 使用JavaScript（如jQuery或其他库）监听第一个菜单的选择事件。 3. 当选择改变时，发送AJAX请求到服务器，传递选定的主...

    Ajax+struts+hibernate实现级联菜单

    Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单

    java实现Ajax级联菜单

    在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中，我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax，即...

    用jquery开发的ajax各种实例包括（级联菜单，谷歌式搜索提示，可编辑表格页面无刷新切换等）

    在本文中，我们将深入探讨如何使用jQuery库进行AJAX（异步JavaScript和XML）开发，通过实际案例来学习包括级联菜单、谷歌式搜索提示和可编辑表格在内的常见功能。这些功能都允许用户在不刷新整个页面的情况下与网页...

    运用ajax+jsp+servlet实现三级级联菜单

    在这个案例中，我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三级级联菜单。 **AJAX (Asynchronous JavaScript and XML)** 是一种在不刷新整个网页的情况下，与服务器交换数据并更新部分网页的技术。它通过...

    Ajax级联菜单,通过dwr框架实现省份城市级联效果

    在这个特定的场景中，我们利用Ajax技术和Direct Web Remoting（DWR）框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验，因为它减少了用户手动刷新页面的需求，提供了流畅的交互。 首先，我们需要...

Magicbox
Global site tag (gtag.js) - Google Analytics