首页 新闻 会员 周边

javascript通过XMLHttpRequest实现下拉框联动的效果的问题

0
悬赏园豆:50 [已关闭问题] 关闭于 2013-03-30 22:18

说明:
第一个显示系别的下拉框显示正常,选中的值传到第二个页面的时候也正常,第二个页面处理完值存在<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>

草莓飞鱼儿的主页 草莓飞鱼儿 | 初学一级 | 园豆:140
提问于:2013-03-27 21:54
< >
分享
所有回答(2)
0

我的建议就是 使用jquery的ajax,返回json数据。

chenping2008 | 园豆:9836 (大侠五级) | 2013-03-28 09:26

问题是我才刚开始学这个,那些写的真的好的我未必看得懂,我在网上也有找过很多资料,有的是做静态不连接数据库的,但是我不会改,而且我赶时间呢。

我这段代码本身有问题么?

支持(0) 反对(0) 草莓飞鱼儿 | 园豆:140 (初学一级) | 2013-03-28 11:26
0
dotnetgeek | 园豆:482 (菜鸟二级) | 2013-03-28 13:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册