天天看點

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屬性實作定位顯示 。