AJAX实现web页面中级联菜单的设计_AJAX相关教程-查字典教程网
AJAX实现web页面中级联菜单的设计
AJAX实现web页面中级联菜单的设计
发布时间:2016-12-29 来源:查字典编辑
摘要:看了大峡搞的级联菜单,我也班门弄斧一把,嘿嘿,花了一点时间搞了个级联菜单贴上来看看。本例中只要你选择成员分类名称就会自动显示成员名称:首先在...

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

首先在eclipse中建一个项目,名称你自己做主了,这里为Easyjf-menu,对应的浏览器页面代码为:

Easyjf-menu.jsp

<@pagecontentType=”text/html;charser=UTF-8”language=”java”%>

<head>

……..

</head>

<scriptlanguage=”javascript”>

varXMLHttpReq;

varcurrentSort;

//创建xmlhttprequset对象

functioncreateXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq=newXMLHttpRequest();

}

elseif(window.ActiveXObject){

try{

XMlHttpReq=newActiveXObject(“Msxml2.XMLHTTP”);

}catch(e){}

try{

XMLHttpRequest=newActiveXObject(“Microsoft.XMLHTTP”);

}catch(e){}

}

}

//发送请求函数

functionsendRequest(url){

createXMLHttpRequest();

XMLHttpReq.open(“GET”,url,true);

XMLHttpReq.onreadystatechange=processResponse;

XMLHttpReq.send(null);

}

//处理返回信息函数

functionprocessResponse(){

if(XMLHttpRequest.readyState==4){

if(XMLHttpRequest.status==200){

updateMenu();

}else{alert(“您请求的页面有异常!”)}

}

}

//更新菜单函数

functionupdateMenu(){

varres=XMLHttpReq.responseXML.getElementIdByTagName(“res”);

varsunMenu=””;

for(vari=0;i<res.length;i++){

submenu=subMenu+res[1].fistChild.data+”<br>”;

}

currentSort.innerHTML=submenu;

}

//创建级联菜单

functionshowSubMenu(obj){

currentSort=document.getElementById(obj);

currentSort.parentNode.style.display=””;

sendRequest(“menu?sort=”+obj);

}

</script>

<b>EasyJF成员</b>

<aonClick=”onShowSubMenu(‘大峡')”>大峡</a>

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新AJAX相关学习
    热门AJAX相关学习
    编程开发子分类