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

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

   首先在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属性实现定位显示 。

目录
相关文章
|
2天前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
|
29天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
49 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
14天前
|
数据处理 开发者 UED
FastAPI 的模板引擎简直太神奇啦!这就是构建动态 Web 页面的终极秘籍,快来一探究竟!
【8月更文挑战第31天】FastAPI 是一款高性能异步 Web 框架,可通过集成模板引擎(如 Jinja2 或 Mako)实现动态页面渲染。使用模板引擎可分离页面结构与数据,简化代码并提升可维护性。此外,它还提供丰富的语法支持,如循环和条件判断,从而增强页面展示效果及开发效率。通过简单的配置步骤,即可在 FastAPI 中启用模板引擎,显著改善用户体验。
69 1
|
4月前
|
Android开发
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
|
23天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
34 1
|
21天前
|
缓存 运维 网络协议
一台新PC进行Web页面请求的历程:技术深度剖析
【8月更文挑战第24天】在当今数字化时代,当我们轻轻点击浏览器上的一个链接,背后其实经历了一场复杂而精妙的交互过程。本文将带您深入探索,从一台全新PC的角度出发,揭秘Web页面请求的全过程,展现这背后隐藏的技术奥秘。
25 0
|
21天前
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
|
3月前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
63 1
Web前端网站(一) - 登录页面及账号密码验证
|
1月前
|
开发框架 前端开发 API
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
|
3月前
jetty内嵌web页面服务入门
jetty内嵌web页面服务入门
27 1