说明:
第一个显示系别的下拉框显示正常,选中的值传到第二个页面的时候也正常,第二个页面处理完值存在<ArrayList>department里面,想通过function updateList2()(红色字体部分)更新第二下拉框的内容,但是失败了,alert之后显示长度为0.
是我的更新函数写的有问题还是什么?新手,求教啊!
(第一个页面的内容)
//更新菜单函数
function updateList1() {
var oxibie=XMLHttpReq.responseXML.getElementsByTagName("department");
var list = document.all.list1;
//alert(oxibie.length);
//==============print:alert=0=============!!!!
for(var i=0;i<oxibie.length;i++){
list.add(new Option(oxibie[i].firstChild.data,oxibie[i].firstChild.data));
}
}
(第二个页面的内容)
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
System.out.println("准备返回");
//=========print:准备返回
out.println("<response>");
for(int i=0;i<department.size();i++)
{
System.out.println("department的数据="+department.get(i));
//==========print:department:的数据=计算机科学与技术;软件工程
out.println("<department>" + department.get(i).toString()+ "</department>");
System.out.println("<department>" + department.get(i).toString()+ "</department>");
//===========print:<department>计算机科学与技术</department>;<department>软件工程</department>
}
out.println("</response>");
out.flush();
%>
我定义了两个页面,第一个是menu.jsp,第二个页面是menu2.jsp.
下面是详细代码。
menu.jsp内容:
<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 oxibie=XMLHttpReq.responseXML.getElementsByTagName("department");
var list = document.all.list1;
//alert(oxibie.length);
//==============print:alert=0=============!!!!
for(var i=0;i<oxibie.length;i++){
list.add(new Option(oxibie[i].firstChild.data,oxibie[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 ozhuanye=XMLHttpReq.responseXML.getElementsByTagName("classname");
var list = document.all.list2;
for(var i=0;i<ozhuanye.length;i++){
list.add(new Option(ozhuanye[i].firstChild.data,ozhuanye[i].firstChild.data));
} }
// 创建级联菜单函数
function showList1(obj) {
clearList1();
clearList2();
sendRequest1("menu2.jsp?xibie=" + obj);
}
function showList2(obj) {
clearList2();
sendRequest2("menu2.jsp?zhuanye="+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 name="list0" onchange="showList1(this.options[this.options.selectedIndex].value)" style="width:150px">
<option value=''>---请选择(初始化)---</option>
<%
for(int i=0;i<xibie.size();i++)
{ out.println("<option value='"+xibie.get(i)+"'>"+xibie.get(i)+"</option>"); }
%>
</select>
<select name="list1" onchange="showList2(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择(初始化)---</option>
</select>
<select name="list2" onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择(初始化)---</option>
</select>
</body>
</html>
、
menu2.jsp内容:
<%
String xibie=request.getParameter("xibie");
String zhuanye = request.getParameter("classname");
xibie = new String(xibie.getBytes("ISO-8859-1"),"GBK");
System.out.println("第一次的参数="+xibie);
//==========print:第一次的参数=计算机科学与技术系
......
......
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
System.out.println("准备返回");
//=========print:准备返回
out.println("<response>");
for(int i=0;i<department.size();i++)
{
System.out.println("department的数据="+department.get(i));
//==========print:department:的数据=计算机科学与技术;软件工程
out.println("<department>" + department.get(i).toString()+ "</department>");
System.out.println("<department>" + department.get(i).toString()+ "</department>");
//===========print:<department>计算机科学与技术</department>;<department>软件工程</department>
}
for(int i=0;i<classes.size();i++)
{
out.println("<classname>" + classes.get(i).toString() + "</classname>");
}
out.println("</response>");
out.flush();
%>
</body>
</html>
我的建议就是 使用jquery的ajax,返回json数据。
问题是我才刚开始学这个,那些写的真的好的我未必看得懂,我在网上也有找过很多资料,有的是做静态不连接数据库的,但是我不会改,而且我赶时间呢。
我这段代码本身有问题么?