第4讲:使用ajax技术实现菜单展开或隐藏功能(xml数据)

文章介绍了如何使用Ajax技术在前端静态HTML页面中实现点击菜单时展开子菜单的功能。当用户点击一级菜单,它向后端的JSP文件发送请求,JSP返回XML格式的数据,然后前端JavaScript解析并动态加载二级菜单的内容。这个过程实现了异步数据交换,提高了用户体验。
摘要由CSDN通过智能技术生成

使用ajax技术实现点击菜单时,展开当前子菜单列表,隐藏其他子菜单功能;前端使用静态html页面生成一级菜单,当点击某个菜单时,发送数据到后端(jsp文件),利用responseXML返回xml格式文件,刷新二级菜单。

ajax.js

var xmlhttp=null;
//创建XMLHttpRequest对象
function createHttpRequest(){
    if(window.XMLHttpRequest){ //Mozilla 浏览器
        xmlhttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新版IE
        }catch(e){
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                xmlhttp = null;
            }
        }
    }
    if(!xmlhttp){ //创建XMLHttpRequest失败
        alert("不能创建XMLHttpRequest对象实例");
    }
}
//发送函数
function sendRequest(method,url,param,callbackHandler){
    //创建对象
    createHttpRequest();
    //绑定事件,后台返回的数据,通过callback方法处理
    xmlhttp.onreadystatechange = callbackHandler;

    if(method=="get" || method=="GET"){
        //初始化发送信息
        xmlhttp.open(method,url + "?" + param,true);
        xmlhttp.send(null);
    }

    if(method=="post" || method=="POST"){
        //初始化发送信息
        xmlhttp.open(method,url,true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send(param);
    }
}

前端文件: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=gb18030" />
<title>Ajax应用举例</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
	var dep=null;
	function getMembers(depart){
		if(depart!="null"){
			hideMenu();
			dep = depart;
			var url="/ajaxProj/T2/select.jsp";
			var params = 'depart=' + depart;
			sendRequest('GET',url,params,showMembers);
		}
	}
	
	//根据提交部门返回的职员列表动态加载数据
	function showMembers(){
		if (xmlhttp.readyState == 4) { 
			if (xmlhttp.status == 200) {
				//获取xml格式的数据xmlhttp.responseXML
				//membersData获得的是一个数组
				var membersData = xmlhttp.responseXML.getElementsByTagName("member");
				console.log(membersData);
				var mdisplay = '';
				for(var i=0;i<membersData.length;i++){
					mdisplay += '&nbsp;&nbsp;&nbsp;';
					mdisplay += membersData[i].childNodes[1].firstChild.nodeValue;
					mdisplay += '<br>';
				}
				//显示选中的部门display(block显示,none隐藏),隐藏内容同时隐藏空间
				//visibility(hidden,visible),隐藏内容,不隐藏空间
				document.getElementById(dep).parentNode.style.display='block';
				document.getElementById(dep).innerHTML=mdisplay;
			} else { //页面不正常 
				alert("您请求的页面有异常"); 
			}
		}
	}
	//隐藏菜单
	function hideMenu(){
		if(!dep) return ;
		if(document.getElementById(dep).parentNode.style.display=='none'){
			document.getElementById(dep).parentNode.style.display='block';
		} else if(document.getElementById(dep).parentNode.style.display='block'){
			document.getElementById(dep).parentNode.style.display='none';
			document.getElementById(dep).innerHTML='&nbsp;';
			return ;
		}
	}
</script>
</head>
<body>
<h1>多级菜单</h1>
<hr />
<table width="500" border="0" cellspacing="0" cellpadding="0"> 
	<tr> 
		<td height="20"><a href="javascript:void(0)" onClick="getMembers('d1')">部门1</a>
		</td> 
	</tr> 
	<tr style="display:none"> 
		<td height="20" id="d1">&nbsp;</td> 
	</tr> 
	<tr> 
		<td height="20"><a href="javascript:void(0)" onClick="getMembers('d2')">部门2</a> 
		</td> 
	</tr> 
	<tr style="display:none "> 
		<td id="d2" height="20">&nbsp;</td> 
	</tr>
	<tr> 
		<td height="20"><a href="javascript:void(0)" onClick="getMembers('d3')">部门3</a> 
		</td> 
	</tr> 
	<tr style="display:none "> 
		<td id="d3" height="20">&nbsp;</td> 
	</tr> 
	<tr> 
		<td height="20"><a href="javascript:void(0)" onClick="getMembers('d4')">部门4</a> 
		</td> 
	</tr> 
	<tr style="display:none "> 
		<td id="d4" height="20">&nbsp;</td> 
	</tr>
</table> 
</body>
</html>

后端代码(select.jsp):

<%@ page contentType="text/xml; charset=gb18030"%><%@ page import="java.util.*"  %><%
	Map map = new HashMap();
	String d1 = "<member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member>";
	String d2 = "<member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member>";
	String d3 = "<member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member>";
	String d4 = "<member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member>";
	map.put("d1",d1);
	map.put("d2",d2);
	map.put("d3",d3);
	map.put("d4",d4);

	String depart= request.getParameter("depart");
	if(depart==null) depart = "d1";
	StringBuffer sb = new StringBuffer();
	sb.append("<members>");	
	sb.append(map.get(depart).toString());
	sb.append("</members>");
	out.write("<?xml version='1.0' encoding='gb2312' ?>");
	out.write(sb.toString());
%>

运行效果:

 

本人从事软件项目开发20多年,2005年开始从事Java工程师系列课程的教学工作,录制50多门精品视频课程,包含java基础,jspweb开发,SSH,SSM,SpringBoot,SpringCloud,人工智能,在线支付等众多商业项目,每门课程都包含有项目实战,上课PPT,及完整的源代码下载,有兴趣的朋友可以看看我的在线课堂

讲师课堂链接:https://edu.csdn.net/lecturer/893

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CSDN专家-赖老师(软件之家)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值