JSP+AJAX三级级联及更多级的实现
使用网上的一个例子，结合自已的实践，还没有做出来，先放在这里，慢慢的改进~~原来网页的链接没看到了~~
第一个页面：menu.jsp
<%@pagelanguage="java"import="java.util.*,java.sql.*"pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
%>
<html>
<head>
<METAhttp-equiv=Content-Typecontent="text/html;charset=UTF-8">
<!--LINKhref="images/css.css"type=text/cssrel=stylesheet-->
<title>级联菜单</title>
</head>
<%
//连接到数据库，并且得到一个List，作为第一个select控件的数据源
StringCLASSNANE="com.microsoft.jdbc.sqlserver.SQLServerDriver";
StringURL="jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
StringUSER="sa";
StringPASSWORD="";
Connectionconn=null;
Statementst=null;
ResultSetrs=null;
Listcollege=newArrayList();
try{
Class.forName(CLASSNANE);
}catch(java.lang.ClassNotFoundExceptione){
e.printStackTrace();
}
try{
conn=DriverManager.getConnection(URL,USER,PASSWORD);
st=conn.createStatement();
Stringsql="selectsnamefrom表名";
rs=st.executeQuery(sql);
while(rs.next())
{
college.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
}catch(Exceptione){
e.printStackTrace();
}
%>
<body>
<scriptlanguage="javascript">
varXMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
//创建XMLHttpRequest对象
functioncreateXMLHttpRequest(){
if(window.XMLHttpRequest){//Mozilla浏览器
XMLHttpReq=newXMLHttpRequest();
}
elseif(window.ActiveXObject){//IE浏览器
try{
XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
//发送请求函数
functionsendRequest1(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange=processResponse1;//指定响应函数
XMLHttpReq.send(null);//发送请求
}
//处理返回信息函数
functionprocessResponse1(){
if(XMLHttpReq.readyState==4){//判断对象状态
if(XMLHttpReq.status==200){//信息已经成功返回，开始处理信息
updateList1();
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
functionupdateList1(){
varcountry=XMLHttpReq.responseXML.getElementsByTagName("major");
varlist=document.all.list1;
for(vari=0;i<country.length;i++){
list.add(newOption(country[i].firstChild.data,country[i].firstChild.data));
}
}
//发送请求函数
functionsendRequest2(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange=processResponse2;//指定响应函数
XMLHttpReq.send(null);//发送请求
}
//处理返回信息函数
functionprocessResponse2(){
if(XMLHttpReq.readyState==4){//判断对象状态
if(XMLHttpReq.status==200){//信息已经成功返回，开始处理信息
updateList2();
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
functionupdateList2(){
varcity=XMLHttpReq.responseXML.getElementsByTagName("classname");
varlist=document.all.list2;
for(vari=0;i<city.length;i++){
list.add(newOption(city[i].firstChild.data,city[i].firstChild.data));
}
}
//创建级联菜单函数
functionshowList1(obj){
clearList1();
clearList2();
sendRequest1("menujsp.jsp?college="+obj);
}
functionshowList2(obj){
clearList2();
sendRequest2("menujsp.jsp?classname="+obj);
}
functionclearList1()
{
varlist=document.all.list1;
list.options.length=0;
list.add(newOption("---请选择---",""));
}
functionclearList2()
{
varlist=document.all.list2;
list.options.length=0;
list.add(newOption("---请选择---",""));
}
</script>
<selectonchange="showList1(this.options[this.options.selectedIndex].value)"name="collegeselect"style="width:150px">
<optionvalue=''>---请选择---</option>
<%
for(inti=0;i<college.size();i++)
{
out.println("<optionvalue='"+college.get(i)+"'>"+college.get(i)+"</option>");
}
%>
</select>
<selectname="list1"onchange="showList2(this.options[this.options.selectedIndex].value)"style="width:150px">
<optionname="">---请选择---</option>
</select>
<selectname="list2"onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)"style="width:150px">
<optionname="">---请选择---</option>
</select>
</body>
</html>
第二个页面，用来接受请求：
menujsp.jsp
<%@pagecontentType="text/html;charset=UTF-8"import="java.util.*,java.sql.*"%>
<%
Stringcollege=request.getParameter("college");
Stringclassname=request.getParameter("classname");
college=newString(college.getBytes("ISO-8859-1"),"GBK");
System.out.println("学院"+college);
StringCLASSNANE="com.microsoft.jdbc.sqlserver.SQLServerDriver";
StringURL="jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
StringUSER="sa";
StringPASSWORD="";
Connectionconn=null;
Statementst=null;
ResultSetrs=null;
Listmajor=newArrayList();
Listclasses=newArrayList();
try{
Class.forName(CLASSNANE);
}catch(java.lang.ClassNotFoundExceptione){
e.printStackTrace();
}
try{
conn=DriverManager.getConnection(URL,USER,PASSWORD);
st=conn.createStatement();
if(college!=null)
{
Stringsql="selectmnamefromtb_majorminnerjoin(select*fromtb_schoolwheresname='"
+college+"')"+"eonm.msid=e.sid";
System.out.println(sql);
rs=st.executeQuery(sql);
while(rs.next())
{
major.add(rs.getString(1));
}
}
if(classname!=null)
{
//这里做的是一个内联接查询
Stringsql2="selectmnamefromtb_majorminnerjoin(select*fromtb_schoolwheresname='"
+classname+"')"+"eonm.msid=e.sid";
System.out.println(sql2);
rs=st.executeQuery(sql2);
while(rs.next())
{
classes.add(rs.getString(1));
}
}
rs.close();
st.close();
conn.close();
}catch(Exceptione){
e.printStackTrace();
}
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
for(inti=0;i<major.size();i++)
{
out.println("<major>"+major.get(i).toString()+"</major>");
}
for(inti=0;i<classes.size();i++)
{
out.println("<classname>"+classes.get(i).toString()+"</classname>");
}
out.println("</response>");
out.flush();
%>
从网上参考时遇到的问题：
1.编码的问题，虽然页面上都是UTF-8，但是转过来的是GBK
用上一句
college=newString(college.getBytes("ISO-8859-1"),"GBK");
得以解决，但因为还没看AJAX,所以还搞不清楚，先实现吧
2.参数传值的问题。第一个下拉框选中之后，第二个下拉框出现内容，但是在第二个下拉框选中内容之后，
参数值传不过去，是传值的问题，还是其它，，还在研究中....晕~~