服务器维护网站维护数据维护系统安全配置
专业定制网站企业建站一条龙、软件定制开发、系统集成
稳定虚机备案一条龙，稳定快捷通道
服务理念诚信守诺客户至上专业精神专心贯注

J+AJAX 三级级联及更多级的实现

作者：黑客防线网安JSP教程基地来源：黑客防线网安JSP教程基地浏览次数：0

黑客防线网安网讯： 使用网上的一个例子，结合自已的实践，还没有做出来，先放在这里，慢慢的改进~~原来网页的链接没看到了~~ 第一个页面：menu.jsp <%@ page language="java" import="java.util.*,java.sql...

使用网上的一个例子，结合自已的实践，还没有做出来，先放在这里，慢慢的改进~~原来网页的链接没看到了~~

第一个页面：menu.jsp
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
%>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">

<title>级联菜单</title>
</head>
<%

//连接到数据库，并且得到一个List，作为第一个select控件的数据源

String CLASSNANE = "com.microsoft.jdbc.sqlserver.SQLServerDriver";
String URL = "jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
String USER = "sa";
String PASSWORD = "";

Connection conn = null;
Statement st = null;
ResultSet rs = null;
List college = new ArrayList();

try{
Class.forName(CLASSNANE);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}

try {
conn = DriverManager.getConnection(URL,USER,PASSWORD);
st=conn.createStatement();

String sql = "select sname from 表名";
rs=st.executeQuery(sql);
while (rs.next())
{
college.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
<body>
<script language="javascript">
var XMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest1(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse1;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse1() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList1();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateList1() {
var country=XMLHttpReq.responseXML.getElementsByTagName("major");
var list = document.all.list1;
for(var i=0;i<country.length;i++){
list.add(new Option(country[i].firstChild.data,country[i].firstChild.data));
}
}

//发送请求函数
function sendRequest2(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse2;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse2() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList2();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}

function updateList2() {
var city=XMLHttpReq.responseXML.getElementsByTagName("classname");
var list = document.all.list2;
for(var i=0;i<city.length;i++){
list.add(new Option(city[i].firstChild.data,city[i].firstChild.data));
}
}
// 创建级联菜单函数
function showList1(obj) {
clearList1();
clearList2();
sendRequest1("menujsp.jsp?college=" + obj);
}
function showList2(obj) {
clearList2();
sendRequest2("menujsp.jsp?classname="+obj);
}

function clearList1()
{
var list = document.all.list1;
list.options.length=0;
list.add(new Option("---请选择---",""));
}

function clearList2()
{
var list = document.all.list2;
list.options.length=0;
list.add(new Option("---请选择---",""));
}

</script>
<select onchange="showList1(this.options[this.options.selectedIndex].value)" name="collegeselect" style="width:150px">
<option value=''>---请选择---</option>
<%
for(int i=0;i<college.size();i++)
{
out.println("<option value='"+college.get(i)+"'>"+college.get(i)+"</option>");