ajax的简单实现：级联菜单

最新推荐文章于 2021-02-12 17:35:35 发布

Kerry的天空

最新推荐文章于 2021-02-12 17:35:35 发布

阅读量1k

点赞数

分类专栏：编程基础文章标签： ajax xmlhttprequest stylesheet function string 浏览器

本文链接：https://blog.youkuaiyun.com/gxf212/article/details/2592293

版权

编程基础专栏收录该内容

37 篇文章

订阅专栏

两个部分： 表现层用HTML   menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>组织干部信息综合管理系统</title>

<link href="styles/style/css/main.css" rel="stylesheet" type="text/css" />

<link href="styles/style/css/footer.css" rel="stylesheet" type="text/css" />

</head>



<script language="javascript">

var XMLHttpReq;

	var currentSort;

 	//创建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 sendRequest(url) {

		createXMLHttpRequest();

		XMLHttpReq.open("GET", url, true);

		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

		XMLHttpReq.send(null);  // 发送请求

	}

	// 处理返回信息函数

    function processResponse() {

    	if (XMLHttpReq.readyState == 4) { // 判断对象状态

        	if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

				updateMenu();

		    } else { //页面不正常

		      	alert("您所请求的页面有异常。");

		    }

        }

    }



	function updateMenu() {

	    var res=XMLHttpReq.responseXML.getElementsByTagName("res")

	    var subMenu = "";

	    subMenu = "<select id='modcode' >";

	    for(var i = 0; i < res.length; i++) {

	        subMenu = subMenu + "<option value='"+res[i].firstChild.data+"1'>"+res[i].firstChild.data+"</option>";

	    }

	    subMenu =subMenu +  "</select>";

	    alert(subMenu);

		currentSort.innerHTML = subMenu;

	}

	

	// 创建级联菜单函数

	function showSubSel(sitecode,obj) {

		alert(sitecode);

		currentSort =document.getElementById(obj); 

		currentSort.parentNode.style.display = "";

		sendRequest("sel.jsp?obj="+sitecode);

	}	

	

	



</script> 





<body>





<table style="BORDER-COLLAPSE: collapse" borderColor=#111111 

cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>



<TR>

  <TD align=middle bgColor=#dbc2b0 height=19><B>笔记本品牌</B> </TD>

</TR>

<tr>

  <td height="20"> 

<select name="selectSite" id="selectSite" class="select" οnchange="showSubSel(this.value,'mod')" >

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

  </td>

</tr>

<tr style="display:none ">

  <td id="mod" height="20"> </td>

</tr>

</table>





</body>

</html>

底层就随便 ，用什么都可以：

<%@ page contentType="text/html; charset=GBK" %>

<% //接收浏览器端提交的信息

String obj=request.getParameter("obj");  

System.out.println("obj:"+obj);

String contents1="";  

String contents2=""; 

if(obj.equals("1")){  

contents1="IBM笔记本1";  

contents2="IBM笔记本1";  

}else if(obj.equals("2")){  

contents1="SONY笔记本1";  

contents2="SONY笔记本2";  

}else if(obj.equals("3")){  

contents1="3-1";  

contents2="3-2";  

}  //传回响应数据   

response.setContentType("text/xml; charset=UTF-8");  

response.setHeader("Cache-Control", "no-cache");  

out.println("<response>");  

out.println("<res>" + contents1 + "</res>");  

out.println("<res>" + contents2 + "</res>");  

out.println("</response>");  out.close();   

%>