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

news2024/12/25 9:10:06

使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698729.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习李宏毅学习笔记35

文章目录 前言一、Meta learning1.第一步2.第二步3.第三步 二、machine learning 和 meta learning区别总结 前言 Meta learning元学习&#xff1a;学习如何学习 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Meta learning 学习这件事也是一个…

webassembly安装python环境问题

在部署emscripten过程中&#xff0c;步骤emsdk install latest报错&#xff1a; 本以为是多个版本或版本不对应导致的&#xff0c;但是卸载所有版本并安装python3.9之后还是不行。 现象就是在cmd中使用python --version不报错也无版本显示。 一波bing~之后找到了结果(PYTHON|…

《Opencv3编程入门》学习笔记—第九章

《Opencv3编程入门》学习笔记 记录一下在学习《Opencv3编程入门》这本书时遇到的问题或重要的知识点。 第九章 直方图与匹配 一、图像直方图概述 1、作用&#xff1a;   在每个兴趣点设置一个有相近特征的直方图所构成的标签&#xff0c;通过标记帧与帧之间显著的边缘、颜…

性能测试讲解超详细Jmeter

目录 什么是性能 性能测试的目的 功能测试和性能测试 基准测试 负载测试 稳定性测试 压力测试 并发测试 总结 性能测试指标 响应时间 并发数 吞吐量 点击数 错误率 资源使用率 总结 性能测试流程 性能测试需求分析 性能测试计划和方案 ​编辑性能测试用例​编辑 性…

【Linux系统编程】shell的感性理解——王婆说媒

文章目录 1. shell是什么&#xff1f;它有什么作用&#xff1f;2. 透过王婆说媒感性理解shell的运行机制开端发展波澜渐起&#xff08;正常命令的处理&#xff09;故事角色与处理过程中各部分的映射走向高潮&#xff08;非法请求的处理&#xff09;shell 存在的意义结尾 1. she…

Elasticsearch:删除快照安全吗?

快速回答&#xff1a;是的&#xff01; 删除快照是安全的&#xff0c;因为每个快照在逻辑上都是独立的。 了解如何以及为何可以继续阅读。 Elasticsearch 使用增量快照&#xff0c;使你能够高效地备份和恢复数据。 你可以在这篇精彩的文章中找到它的工作原理 “Elasticsearch&…

【select2下拉框】带搜索功能以及实现关联下拉框

需求 1、有两个下拉框 地区下拉框机构下拉框 2、地区变化&#xff0c;机构下拉框中内容也随之变化。 3、当地区为空时&#xff0c;显示全部机构列表 效果展示 代码实现 1、前端 &#xff08;具体样式相关代码不在此展示&#xff09; <div class"form-group"…

简单的手机记事本怎么把内容标记为完成状态?

很多人平时会在手机记事本上记录一些自己身边需要记住的事情&#xff0c;有的事情做完之后不想删除&#xff0c;又想要和未完成的内容区分开&#xff0c;那么这种情况下可以将它标记为已完成状态。简单的手机记事本怎么把内容标记为完成状态呢&#xff1f;以iPhone手机端敬业签…

阿里云原生大数据计算服务maxcompute学习体验

这两天有兴趣学习了下阿里的maxcompute大数据&#xff0c;随便谈谈自己的感受。 一、感受 阿里云相关的产品线太多了&#xff0c;热门产品一页已经放不下了。正因为东西太多给人一种杂乱的感觉&#xff0c;也可能这是给技术人员用的&#xff0c;所以不用太讲客户体验&#xf…

C# Lable增删改查

文章目录 C# Lable 增删改查&#xff08;1&#xff09;项目截图Insert&#xff08;新增&#xff09;新增执行SQL语句方法 Delete&#xff08;删除&#xff09;删除执行SQL语句方法 Update&#xff08;修改&#xff09;删除执行SQL语句方法 Select&#xff08;查询&#xff09;查…

DeepC 实用教程(二)建模流程

目 录 一、前言二、单位制与容差三、环境数据四、浮体模型4.1 定义浮体数据4.2 浮力补偿4.3 创建系泊连接点 五、系泊系统5.1 创建系泊连接点5.2 定义各种属性5.3 创建线对象 六、参考文献 一、前言 SESAM &#xff08;Super Element Structure Analysis Module&#xff09;是由…

JUC之CAS和原子操作类

文章目录 1 CAS1.1 是什么1.2 原理1.3 UnSafe1.4 自旋锁1.5 CAS的问题1.5.1 死循环消耗CPU资源1.5.2 ABA问题 2 原子操作类2.1 引用类型原子类2.1.1 AtomicReference2.1.2 AtomicStampedReference2.1.3 AtomicMarkableReference 2.2 基本类型原子类2.3 数组类型原子类2.4 对象的…

【2022 JCR 期刊影响因子】(四)水资源

原文链接&#xff1a; 【2022 JCR 期刊影响因子】&#xff08;四&#xff09;水资源 微信公众号同步更新 地信学子GISer and Coder 2022 JCR 期刊影响因子刚刚发布&#xff0c;今年的影响因子只保留1位小数。水资源领域的 SCIE 收录期刊的影响因子如下。 微信公众号同步更新 …

Unity基础-Vector3.Lerp的使用给一个简单的实例

一个简单的实例&#xff0c;演示了如何使用Vector3.Lerp来实现物体在两个位置之间平滑移动的效果&#xff1a; using UnityEngine;public class ObjectMovement : MonoBehaviour {public Transform startPoint;public Transform endPoint;public float moveDuration 2f;priva…

[PMLR 2021] Zero-Shot Text-to-Image Generation:零样本文本到图像生成

[PMLR 2021]Zero-Shot Text-to-Image Generation&#xff1a;零样本文本到图像生成 Fig 1. 原始图像(上)和离散VAE重建图像(下)的比较。编码器对空间分辨率进行8倍的下采样。虽然细节(例如&#xff0c;猫毛的纹理、店面上的文字和插图中的细线)有时会丢失或扭曲&#xff0c;但图…

为什么有些前端一直用 div 当按钮,而不是用 button?

&#x1f482; 个人网站:【海拥】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 前言div 和 button使用…

Linux学习之进程控制和进程之间的关系

nice值的设定 关于vim四种模式一些介绍&#xff0c;可以看《Linux学习之vim正常模式和插入模式》 vim a.sh&#xff0c;按i进入到插入模式&#xff0c;这样才能输入字符到a.sh文件中。 把下边的内容写进去&#xff1a; #!/bin/bashecho $$ while : # 无限循环 do: done按Es…

Redis设计与实现笔记之SDS

1 数据结构与对象 1.1 简单动态字符串 SDS简单动态字符串&#xff08;simple dynamic string&#xff0c;SDS&#xff09;是Redis中字符串的底层数据结构。 struct sdshdr {// 记录 buf 数组中已使用字节的数量// 等于 SDS 所保存字符串的长度int len;// 记录 buf 数组中未使…

房屋信息怎么做二维码?户型文件怎么批量转二维码?

现在很多房产开发商都会用二维码来储存各个楼每户的信息&#xff0c;可能是建筑平面图、验房信息、楼区信息等等。那么如果将每户信息导出单独的文件之后&#xff0c;怎样才能够将每个文件批量转成二维码呢&#xff1f;下面教大家使用二维码生成器&#xff08;免费在线二维码生…

pytorch快速入门中文——07(TensorBoard)

使用 TensorBoard 可视化模型&#xff0c;数据和训练 原文&#xff1a;https://pytorch.org/tutorials/intermediate/tensorboard_tutorial.html 在 60 分钟突击中&#xff0c;我们向您展示了如何加载数据&#xff0c;如何通过定义为nn.Module子类的模型提供数据&#xff0c;如…