Ajax 实现级联菜单

plkong

浏览: 177510 次
性别:
来自: 深圳

最近访客更多访客>>

medy13

dev998

IT_PLAYER

coolwindsjm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax MySQL SQL IE JDBC

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

1. 前台实现：

<%@ 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. 后台代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,java.io.*"%>
<%
	//数据库用户名和密码
	int id = Integer.parseInt(request.getParameter("id").trim());
	//System.out.println("id:"+id);
	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 id, name FROM " + tableName
			+ "  where level=1 and parentId=" + id;
	//System.out.println("sql:"+sql);
	ResultSet rs = statement.executeQuery(sql);

	//获取数据结果集
	response.setContentType("text/html; charset=UTF-8");
	response.setHeader("Cache-Control", "no-cache");
	PrintWriter pout = null;
	pout = response.getWriter();
	pout.print("[");
	while (rs.next()) {
		try {

			pout.print("'" + (rs.getString("name")) + "',");
			pout.print(rs.getString("id"));
			pout.print(",");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	pout.print("0]");
	rs.close();
	statement.close();
	conn.close();
%>