AJAX實(shí)現(xiàn)web頁面中級(jí)聯(lián)菜單的設(shè)計(jì)
更新時(shí)間：2007年03月06日 00:00:00 作者：
看了大峽搞的級(jí)聯(lián)菜單，我也班門弄斧一把，嘿嘿，花了一點(diǎn)時(shí)間搞了個(gè)級(jí)聯(lián)菜單貼上來看看。本例中只要你選擇成員分類名稱就會(huì)自動(dòng)顯示成員名稱：
首先在eclipse中建一個(gè)項(xiàng)目，名稱你自己做主了，這里為Easyjf-menu，對(duì)應(yīng)的瀏覽器頁面代碼為：
Easyjf-menu.jsp
<@page contentType=”text/html;charser=UTF-8” language=”java”%>
<head>
……..
</head>
<script language=”javascript”>
var XMLHttpReq;
var currentSort;
//創(chuàng)建xmlhttprequset對(duì)象
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){}
}
}
//發(fā)送請(qǐng)求函數(shù)
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open(“GET”,url,true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
//處理返回信息函數(shù)
function processResponse(){
if(XMLHttpRequest.readyState==4){
if(XMLHttpRequest.status==200){
updateMenu();
}else{alert(“您請(qǐng)求的頁面有異常!”)}
}
}
//更新菜單函數(shù)
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;
}
//創(chuàng)建級(jí)聯(lián)菜單
function showSubMenu(obj){
currentSort=document.getElementById(obj);
currentSort.parentNode.style.display=””;
sendRequest(“menu?sort=”+obj);
}
</script>
<b>EasyJF成員</b>
<a onClick=”onShowSubMenu(‘大峽')”>大峽</a>
,該頁面中提供了對(duì)應(yīng)的菜單以供用戶選擇，用戶選擇菜單后，調(diào)用showSubMenu(‘XXX')函數(shù)，其中參數(shù)用于傳遞用戶所選菜單的標(biāo)識(shí)信息到服務(wù)器以決定獲取服務(wù)器的哪個(gè)在菜單內(nèi)容，首先獲得菜單的識(shí)別信息，再提交給Ajax,這里用innerHTML屬性實(shí)現(xiàn)定位顯示！
首先在eclipse中建一個(gè)項(xiàng)目，名稱你自己做主了，這里為Easyjf-menu，對(duì)應(yīng)的瀏覽器頁面代碼為：
Easyjf-menu.jsp
<@page contentType=”text/html;charser=UTF-8” language=”java”%>
<head>
……..
</head>
<script language=”javascript”>
var XMLHttpReq;
var currentSort;
//創(chuàng)建xmlhttprequset對(duì)象
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){}
}
}
//發(fā)送請(qǐng)求函數(shù)
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open(“GET”,url,true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
//處理返回信息函數(shù)
function processResponse(){
if(XMLHttpRequest.readyState==4){
if(XMLHttpRequest.status==200){
updateMenu();
}else{alert(“您請(qǐng)求的頁面有異常!”)}
}
}
//更新菜單函數(shù)
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;
}
//創(chuàng)建級(jí)聯(lián)菜單
function showSubMenu(obj){
currentSort=document.getElementById(obj);
currentSort.parentNode.style.display=””;
sendRequest(“menu?sort=”+obj);
}
</script>
<b>EasyJF成員</b>
<a onClick=”onShowSubMenu(‘大峽')”>大峽</a>
,該頁面中提供了對(duì)應(yīng)的菜單以供用戶選擇，用戶選擇菜單后，調(diào)用showSubMenu(‘XXX')函數(shù)，其中參數(shù)用于傳遞用戶所選菜單的標(biāo)識(shí)信息到服務(wù)器以決定獲取服務(wù)器的哪個(gè)在菜單內(nèi)容，首先獲得菜單的識(shí)別信息，再提交給Ajax,這里用innerHTML屬性實(shí)現(xiàn)定位顯示！
您可能感興趣的文章:
- jQuery+ajax實(shí)現(xiàn)無刷新級(jí)聯(lián)菜單示例
- Ajax級(jí)聯(lián)菜單實(shí)例代碼
- 前臺(tái)JS(jquery ajax)調(diào)用后臺(tái)方法實(shí)現(xiàn)無刷新級(jí)聯(lián)菜單示例
- AJAX 二級(jí)級(jí)聯(lián)菜單實(shí)現(xiàn)代碼
- Ajax+Json 級(jí)聯(lián)菜單實(shí)現(xiàn)代碼
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實(shí)現(xiàn)2級(jí)聯(lián)動(dòng)下拉菜單
- 利用了jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)互動(dòng)菜單
- ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇菜單示例
- Javascript級(jí)聯(lián)下拉菜單以及AJAX數(shù)據(jù)驗(yàn)證核心代碼
- 基于asp+ajax和數(shù)據(jù)庫驅(qū)動(dòng)的二級(jí)聯(lián)動(dòng)菜單
- 一個(gè)強(qiáng)健 實(shí)用的asp+ajax二級(jí)聯(lián)動(dòng)菜單(有演示和附源程序打包下載)
- ajax級(jí)聯(lián)菜單實(shí)現(xiàn)方法實(shí)例分析
相關(guān)文章
ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法
今天小編就為大家分享一篇ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
是原生的ajax,稍稍的封裝了下,對(duì)了,option為json格式的數(shù)據(jù),對(duì)此可先看這個(gè)2010-05-05
php ajax網(wǎng)站瀏覽統(tǒng)計(jì)功能的簡單實(shí)現(xiàn)
這個(gè)功能應(yīng)該是很多網(wǎng)站都需要的,這里僅僅實(shí)現(xiàn)了一個(gè)基于文件的簡易版本,數(shù)據(jù)庫的版本請(qǐng)自行參考實(shí)現(xiàn),我這里實(shí)現(xiàn)的功能很不完善,比如未過濾是否為同一訪客,是否為同一IP等等,這里僅僅是給大家提供一個(gè)參考.2008-09-09
這篇文章主要介紹了關(guān)于Ajax的封裝詳解,ajax用于瀏覽器與服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請(qǐng)求),做到局部請(qǐng)求以實(shí)現(xiàn)局部刷新,本篇講解ajax的封裝,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了ajax中data傳參的兩種方式,結(jié)合實(shí)例形式簡單分析了ajax參數(shù)傳遞的POST與GET方式,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12
活到老學(xué)到老學(xué)習(xí)AJAX跨域（三）
學(xué)習(xí)AJAX其實(shí)有個(gè)很重要的應(yīng)用，就是為了執(zhí)行另外幾個(gè)站點(diǎn)的ASP，返回結(jié)果。通過本文給大家介紹ajax跨域相關(guān)知識(shí)，需要的朋友參考下2016-02-02
Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
一般的表單都是通過ajax方式提交，所以碰到帶文件上傳的表單就比較麻煩,基本原理就是在頁面增加一個(gè)隱藏iframe，然后通過ajax提交除文件之外的表單數(shù)據(jù),感興趣的你不妨了解一下，或許本文對(duì)你有所幫助2013-01-01
PJBLOG中用到的ajaxjs.幾個(gè)簡單的函數(shù)
PJBLOG中用到的ajaxjs.幾個(gè)簡單的函數(shù)...2007-12-12
這篇文章主要介紹了ajax遍歷xml文檔的方法,實(shí)例分析了jsp結(jié)合Ajax遍歷XML文檔的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
本文主要給大家詳細(xì)講解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以參考下。2015-06-06