AJAX實現web頁面中串聯功能表的設計_AJAX相關

來源:互聯網
上載者:User
看了大峽搞的串聯功能表,我也班門弄斧一把,嘿嘿,花了一點時間搞了個串聯功能表貼上來看看。本例中只要你選擇成員分類名稱就會自動顯示成員名稱: 
   首先在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 屬性實現定位顯示!
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.