AJAX实现web页面中级联菜单的设计
更新时间：2007年03月06日 00:00:00 作者：
看了大峡搞的级联菜单，我也班门弄斧一把，嘿嘿，花了一点时间搞了个级联菜单贴上来看看。本例中只要你选择成员分类名称就会自动显示成员名称：
首先在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属性实现定位显示！
首先在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属性实现定位显示！
您可能感兴趣的文章:
相关文章
今天小编就为大家分享一篇ajax请求后台得到json数据后动态生成树形下拉框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
是原生的ajax,稍稍的封装了下,对了,option为json格式的数据,对此可先看这个2010-05-05
这个功能应该是很多网站都需要的,这里仅仅实现了一个基于文件的简易版本,数据库的版本请自行参考实现,我这里实现的功能很不完善,比如未过滤是否为同一访客,是否为同一IP等等,这里仅仅是给大家提供一个参考.2008-09-09
这篇文章主要介绍了关于Ajax的封装详解,ajax用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新,本篇讲解ajax的封装,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了ajax中data传参的两种方式,结合实例形式简单分析了ajax参数传递的POST与GET方式,非常简单实用,需要的朋友可以参考下2015-12-12
学习AJAX其实有个很重要的应用，就是为了执行另外几个站点的ASP，返回结果。通过本文给大家介绍ajax跨域相关知识，需要的朋友参考下2016-02-02
一般的表单都是通过ajax方式提交，所以碰到带文件上传的表单就比较麻烦,基本原理就是在页面增加一个隐藏iframe，然后通过ajax提交除文件之外的表单数据,感兴趣的你不妨了解一下，或许本文对你有所帮助2013-01-01
PJBLOG中用到的ajaxjs.几个简单的函数...2007-12-12
这篇文章主要介绍了ajax遍历xml文档的方法,实例分析了jsp结合Ajax遍历XML文档的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本文主要给大家详细讲解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以参考下。2015-06-06
最新评论