2010-03-22
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();
- %>