JSP+AJAX三级级联及更多级的实现
使用网上的一个例子,结合自已的实践,还没有做出来,先放在这里,慢慢的改进~~原来网页的链接没看到了~~
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
%>
<%
//连接到数据库,并且得到一个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();
}
%>
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 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 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("---请选择---","")); } <% for(int i=0;i { out.println(""); } %> menujsp.jsp <%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*" %> <% String college=request.getParameter("college"); String classname = request.getParameter("classname"); college = new String(college.getBytes("ISO-8859-1"),"GBK"); System.out.println("学院"+college); 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 major = new ArrayList(); List classes = new ArrayList(); try{ Class.forName(CLASSNANE); } catch(java.lang.ClassNotFoundException e) { e.printStackTrace(); } try { conn = DriverManager.getConnection(URL,USER,PASSWORD); st=conn.createStatement(); if(college != null) { String sql = "select mname from tb_major m inner join (select * from tb_school where sname='" + college + "')" + " e on m.msid=e.sid"; System.out.println(sql); rs=st.executeQuery(sql); while (rs.next()) { major.add(rs.getString(1)); } } if(classname != null) { //这里做的是一个内联接查询 String sql2 = "select mname from tb_major m inner join (select * from tb_school where sname='" + classname + "')" + " e on m.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 (Exception e) { e.printStackTrace(); } response.setContentType("text/xml; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); out.println(" for(int i=0;i { out.println(" } for(int i=0;i { out.println(" } out.println(""); out.flush(); %> 1.编码的问题,虽然页面上都是UTF-8,但是转过来的是GBK 用上一句 college = new String(college.getBytes("ISO-8859-1"),"GBK"); 得以解决,但因为还没看AJAX,所以还搞不清楚,先实现吧 2.参数传值的问题。第一个下拉框选中之后,第二个下拉框出现内容,但是在第二个下拉框选中内容之后, 参数值传不过去,是传值的问题,还是其它 ,,还在研究中....晕~~
查看评论 回复