开发者社区> ikingsmart> 正文

AJAX实现web页面中级联菜单的设计

2008-09-13 1235

简介：

+关注继续查看

看了大峡搞的级联菜单，我也班门弄斧一把，嘿嘿，花了一点时间搞了个级联菜单贴上来看看。本例中只要你选择成员分类名称就会自动显示成员名称：

   首先在eclipse中建一个项目，名称你自己做主了，这里为Easyjf-menu，对应的浏览器页面代码为：
Easyjf-menu.jsp
<@page contentType=”text/html;charser=UTF-8” language=”java”%>
<head>
   ……..
</head>
<script language=”javascript”>
   var XMLHttpReq;
   var currentSort;
   //创建xmlhttprequset对象
   function createXMLHttpRequest(){
   if(window.XMLHttpRequest){
   XMLHttpReq=new XMLHttpRequest();
}
else if (window.ActiveXObject){
try{
     XMlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){}
       try{
XMLHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){}
}
}
//发送请求函数
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open(“GET”,url,true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
//处理返回信息函数
function processResponse(){
   if(XMLHttpRequest.readyState==4){
   if(XMLHttpRequest.status==200){
updateMenu();
}else{alert(“您请求的页面有异常!”)}
}
}
//更新菜单函数
function updateMenu(){
var res=XMLHttpReq.responseXML.getElementIdByTagName(“res”);
var sunMenu=””;
for(var i=0;i<res.length;i++){
submenu=subMenu+res[1].fistChild.data+”<br>”;
}
currentSort.innerHTML=submenu;
}
//创建级联菜单
function showSubMenu(obj){
   currentSort=document.getElementById(obj);
   currentSort.parentNode.style.display=””;
   sendRequest(“menu?sort=”+obj);
}
</script>
<b>EasyJF成员</b>
<a onClick=”onShowSubMenu(‘大峡’)”>大峡</a>

　　该页面中提供了对应的菜单以供用户选择，用户选择菜单后，调用showSubMenu(‘XXX’)函数，其中参数用于传递用户所选菜单的标识信息到服务器以决定获取服务器的哪个在菜单内容，首先获得菜单的识别信息，再提交给Ajax,这里用innerHTML属性实现定位显示。

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 Java JavaScript Android开发

Web页面 ajax.js页面 web ajax ajax.js Web web实现

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

数据备份还原中排他锁问题的解决方案 1352 逐行处理数据时避免死循环 1742 存储过程将.txt.xls文件数据导入数据库表格 1473 Asp.Net页面请求性能大隐患你是否做了这样的事情 1349 json json-rpc 如何在项目中便宜引入Ajax框架（Joyrock开源项目） 1616

相关文章

Java廖志伟

Web阶段：第二十章：Ajax请求

Web阶段：第二十章：Ajax请求

42 0

RiemannHypothesis

Spring 全家桶之 Spring Web MVC（六）- AJAX & Fileupload（下）

Spring 全家桶之 Spring Web MVC（六）- AJAX & Fileupload

51 0

RiemannHypothesis

Spring 全家桶之 Spring Web MVC（六）- AJAX & Fileupload（上）

Spring 全家桶之 Spring Web MVC（六）- AJAX & Fileupload

38 0

浅辄

Java Web(十一)Ajax&Axios&JSON

Ajax&Axios&JSON这三个技术主要是对数据进行处理

66 0

IT工藤新一

Web前端学习：jQuery基础 · 小终结【异步处理AJAX】

Web前端学习：jQuery基础 · 小终结【异步处理AJAX】

41 0

jsm43v22fygxw

Java Web入门之Ajax的用法详解(附代码和实战）

Java Web入门之Ajax的用法详解(附代码和实战）

201 0

张起灵-小哥

Java Web——Ajax的结束与第二个实例

Java Web——Ajax的结束与第二个实例

45 0

张起灵-小哥

Java Web——Ajax的理解与第一个实例

Java Web——Ajax的理解与第一个实例

128 0

红目香薰

AJAX应用和传统Web应用有什么不同

AJAX应用和传统Web应用有什么不同

47 0

Villin

web前端javaScript 之【Ajax】

ajax基础，看完会有收获，喜欢请点赞。

2232 0

+关注

ikingsmart

文章

问答

视频

作者高分内容

更多

数据备份还原中排他锁问题的解决方案 1352 逐行处理数据时避免死循环 1742 存储过程将.txt.xls文件数据导入数据库表格 1473 Asp.Net页面请求性能大隐患你是否做了这样的事情 1349 json json-rpc 如何在项目中便宜引入Ajax框架（Joyrock开源项目） 1616

文章排行榜

最热

最新

1 「开源人说」第五期 | KubeVela：一场向应用交付标准的“冲锋” 199279

2 一个业务前端关于成长的心路历程 64242

3 C语言 | 数据结构—约瑟夫环问题 58995

4 快速开发光伏电站数字孪生运维系统（一） 44683

5 使用 DataAnnotations（数据注解）实现模型的通用数据校验 43167

6 阿里云智能语音交互产品测评：基于语音识别、语音合成、自然语言理解等技术 41957

7 一文深度解读音视频行业技术发展历程 35748

8 Hive数据倾斜的原因以及常用解决方案 33200

9 高并发编程之阻塞队列 32762

10 Java的Stream操作详解 31673

11 Spring 事务【隔离级别与传播机制】 30516

12 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29515

13 计网之初识网络(理解网络传输的基本流程) 28031

14 Android体系课之--LeakCanary内存泄露检测原理解析 25947

15 零基础快速开发Vue图书管理系统—登录注册篇（一） 22692

16 IoT设备数据的存储、解析和价值挖掘实践 22661

17 【实战企业级Java二】渐进式理解Redis分布式锁 22540

18 IoT Studio 物联网可视化应用搭建开发实践 21328

19 虚拟数字人之《手语翻译官》的技术实践 19510

20 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54136

1 OpenSearch上线实时热搜、个性化底纹功能 58

2 ChatGpt与EdgeGpt 129

3 JAVA中如何高效的实现SQL的like语法? 5843

4 RocketMQ x OpenTelemetry 分布式全链路追踪最佳实践 75

5 这才叫开箱即用！ 491

6 运维工程师工作时最常用的20个Linux命令有哪些？建议收藏 17678

7 玖章算术CEO叶正盛在杭州人工智能小镇AIGC论坛发表主题演讲 86

8 Linux基础IO【文件理解与操作】 16877

9 Flink 流批一体方案在数禾的实践 7444

10 超丰厚奖池｜天池达人积分榜，有你而不凡！ 187

11 今天出门你查老黄历了吗？包括万年历在内的超多免费可用 API 推荐（一） 103

12 关于几天前出的 MinIO 敏感信息泄露漏洞，分享两种扫描方法 219

13 五分钟！获得轻量级的云原生应用控制平面 169

14 域名资讯 - XYZ注册局域名报告-2023年2月 70

15 数据备份浅谈 145

16 ChatGPT软件技术栈解密 91

17 阿里云com和cn域名注册代金券免费领取 95

18 灵魂一问：一个Java文件的执行全部过程你确定都清楚吗？ 59

19 简要聊聊UNIX,MINIX,LINUX,BSD的区别与特质 27377

20 Flink Table Store 独立孵化启动，Apache Paimon 诞生 537

相关课程

更多

1819

14

去学习

Ajax 前端开发入门与实战

14210

52

去学习

网络安全攻防 - Web渗透测试

2736

40

去学习

Nginx企业级Web服务实战

605

11

去学习

体验-使用 kubect 部署 web 应用到 k8s 集群

411

1

去学习

云开发Web应用训练营

536

5

去学习

相关电子书

更多

边缘安全，让Web加速有保障

立即下载

使用CNFS搭建弹性Web服务

立即下载

WEB框架0day漏洞的发掘及分析经验分享

立即下载

相关实验场景

更多