联动下拉菜单：采用XMLHttpRequest实现数据获取-优快云博客

本文介绍了一个使用JSP结合AJAX实现下拉菜单联动更新的例子。通过JavaScript发起AJAX请求，从服务器获取相应的文章标题列表及内容，并动态更新页面元素。此示例涉及JSP页面配置、JavaScript异步请求处理以及服务器端响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码比较简单，相信大家能看明白。

另外，我对XMLHttpRequest的使用不是特别熟悉，如果有使用不当之处，还请大家批评指正。

JSP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>

<%@ page import="java.util.*" %>
<%@ page import="org.zcinfomanage.column.dao.SiteColumnDAOImpl" %>
<%@ page import="org.zcinfomanage.pagemanage.po.SiteColumn" %>

<%String appContext = request.getContextPath(); %>

<html>
	<head>
		<title>Test</title>
		<script language="JavaScript" type="text/javascript" src="js/linkageCtl.js"></script>
	</head>
	
	<link href="css.css" rel="stylesheet" type="text/css" />
 <body>

<FORM name="webPageForm" action="<%=appContext %>/webPageManage.do?method=modifyWebPage" method="post">
 	
 
 <table width="97%" border="0" cellspacing="1" cellpadding="2" class="borde2">
    <tr>
      <td height="40" background="UserFiles/Image/bg_table.jpg" bgcolor="#CBE9F9" class="jianju5 jianju4 fontBlueno">
	  	<html:messages id="message" message="true">
				<font color="#ff0000">
					<LI>
						<bean:write name="message"/>
					</LI>
				</font>
	  	</html:messages>
	  </td>
    </tr>
  </table>
 <table width="97%" cellpadding="1" cellspacing="1">
 	<tr>
 		<td class="w" height="40" bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
 			栏目名称:&nbsp;
 			<select name="siteColumnID" onchange="getFileTitleList(this.options[this.options.selectedIndex].value)">
 				<OPTION value="0" >请选择栏目</OPTION>
		    	<%
    			List columnList = new SiteColumnDAOImpl().getSiteColumnList();
    			for(Iterator it = columnList.iterator(); it.hasNext();){
    				SiteColumn column = (SiteColumn)it.next();
    		%>
    		<OPTION value="<%=column.getId()%>" >
    			<%=column.getColumnName()%>
    		</OPTION>
    		<%
    			}
    		%>
	  </select>	  </td>
 	</tr>
 	 	
 	<tr>
 		<td class="w" height="40" bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
 			文章标题:&nbsp;
 			<select name="htmlFileID" onchange="getFileContent(this.options[this.options.selectedIndex].value)">
 				<OPTION value="0" >请选择文章标题</OPTION>
	  </select>	  </td>
 	</tr>
 	
 	<tr>
	 	<td bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
			 <fck:editor id="fileContent" basePath="" height="400px" width="800px"
			 		skinPath="/zcifmg/editor/skins/default/" toolbarSet="Default" 
			 		imageBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" 
			 		linkBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" 
			 		flashBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" 
			 		imageUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=Image" 
			 		linkUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=File" 
			 		flashUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=Flash">
			 </fck:editor>
		</td>
	</tr>

 	
<tr>
	<td>
  	<input type="submit" value="提交"/>  
  	<input type="reset" value="重置"/>
  </td>
<tr>
  </table>
  
  
 </FORM>
  
  
  </body>
</html>

JS:

var req; //定义变量，用来创建xmlhttprequest对象

function getFileTitleList(siteColumnID){
	var reqURL = "modifyRequest.jsp?siteColumnID="+ siteColumnID +"&temp="+ Math.random();
  //alert("** 栏目 = " + siteColumnID);
  //alert("** 请求URL = " + reqURL);
            
  if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
	{
		req=new XMLHttpRequest();
  }else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
  {
  	req=new ActiveXObject("Microsoft.XMLHttp");
  }

	
  //成功创建xmlhttprequest
  if(req){
  	req.open("GET",reqURL,false); //与服务端建立连接(请求方式post或get，地址,true表示异步)
    req.onreadystatechange = callbackFileTitle; //指定回调函数
    req.send(null); //发送请求
  }
}


// 创建xmlhttprequest,ajax开始
function getFileContent(fileTitleID){
	var url = "modifyRequest.jsp?fileTitleID="+ fileTitleID +"&temp="+ Math.random();
  //alert("fileTitleID = " + fileTitleID);
  //alert("url = " + url);
            
  if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
	{
		req=new XMLHttpRequest();
  }else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
  {
  	req=new ActiveXObject("Microsoft.XMLHttp");
  }

	
  //成功创建xmlhttprequest
  if(req){
  	req.open("GET",url,false); //与服务端建立连接(请求方式post或get，地址,true表示异步)
    req.onreadystatechange = callback; //指定回调函数
    req.send(null); //发送请求
  }
}

//回调函数，对服务端的响应处理，监视response状态
function callbackFileTitle(){
	//请求状态为4表示成功
  if(req.readyState == 4){
  	//http状态200表示OK
    if(req.status==200){
	  	Dispaly2();
   	}else{
  		alert("服务端返回状态" + req.statusText);
		}
	}else{
  	waiting2();
  }
}

function callback(){
	//请求状态为4表示成功
  if(req.readyState == 4){
  	//http状态200表示OK
    if(req.status==200){
	  	Dispaly();
   	}else{
  		alert("服务端返回状态" + req.statusText);
		}
	}else{
  	waiting();  
  }
}
        
//接受服务端返回的数据，对其进行显示
function Dispaly2(){
	//alert("** Dispaly2()....");
	var rtnStr = "";
	var fileIDObj = document.getElementById("htmlFileID");
	fileIDObj.innerHTML = '';
	
	fileIDObj.options.add(new Option("请选择文章标题","0"));
	
	var fileTitleList = eval(req.responseText);
	for(i = 0; i < fileTitleList.length; i++){
		//alert("** 文章标题: " + fileTitleList[i].fileTitle +"  文章ID: " + fileTitleList[i].id);
		fileIDObj.options.add(new Option(fileTitleList[i].fileTitle,fileTitleList[i].id));
	}
	
}

function Dispaly(){
	var oEditor = FCKeditorAPI.GetInstance("fileContent");
	oEditor.SetHTML(req.responseText);
}
        
//接受服务端返回的数据，对其进行显示
function waiting2(){
	//alert("** waiting2 ....");
	//var oEditor = FCKeditorAPI.GetInstance("fileContent");
	//oEditor.SetHTML("数据加载中....");
}

function waiting(){
	var oEditor = FCKeditorAPI.GetInstance("fileContent");
	oEditor.SetHTML("数据加载中....");
}
		
function GetInnerHTML(){
	// Get the editor instance that we want to interact with.
	var oEditor = FCKeditorAPI.GetInstance('testfck');
	alert( oEditor.EditorDocument.body.innerHTML ) ;
}