jdbc+ajax实现级联菜单

最新推荐文章于 2022-03-17 11:38:08 发布

zhanbeisiling

最新推荐文章于 2022-03-17 11:38:08 发布

阅读量589

点赞数

文章标签： jdbc ajax xmlhttprequest 数据库 cache sql

本文链接：https://blog.csdn.net/zhanbeisiling/article/details/5405153

版权

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

zhanbeisiling

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jdbc+ajax实现级联菜单

2010-03-22 1.前台代码%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> %@ page import="java.sql.*,java.io.*"%> > html> head> meta http-
复制链接

扫一扫