`

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元素和结点的区别：
评论
发表评论

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

相关推荐

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