使用AJAX技术，可以使网页具有级联式的多层菜单
发布时间：2023-07-22 14:55:34 所属栏目：教程 来源：
导读：本例中只要你选择成员分类名称就会自动显示成员名称：
首先在eclipse中建一个项目，这里为Easyjf-menu，对应的浏览器页面代码为：
Easyjf-menu.jsp
<@page contentType=”text/html;charser=U
首先在eclipse中建一个项目，这里为Easyjf-menu，对应的浏览器页面代码为：
Easyjf-menu.jsp
<@page contentType=”text/html;charser=U
|
本例中只要你选择成员分类名称就会自动显示成员名称： 首先在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 } } //更新菜单函数 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属性实现定位显示！ （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
