版面调整调查!
返回列表 回复 发帖

随便乱写的一个Ajax+php联级菜单。

menu.php是测试联级菜单,data.php模拟后台,使用xml传递数据。menu.php:
  1. <script type="text/javascript" src=../js/prototype.js?></script>
  2. <script>
  3.     var xmlHttp;
  4.     var actiontype;
  5.    
  6.     function createXMLHttp(){
  7.         if(window.ActiveXObject){
  8.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  9.         }else if(window.XMLHttpRequest){
  10.             xmlHttp = new XMLHttpRequest();
  11.         }
  12.     }

  13.     function checktype(type){
  14.         actiontype = type;
  15.         var tmp = "status" + actiontype;        
  16.         var tmp2 = document.getElementById(tmp);
  17.         if(tmp2.innerHTML == "")
  18.             doAction();
  19.         else clearstatus();
  20.     }

  21.     function doAction(){
  22.         
  23.         createXMLHttp();
  24.         xmlHttp.onreadystatechange = callback;
  25.         xmlHttp.open("GET","data.php?type="+actiontype+"&timestamp="+new Date().getTime());
  26.         xmlHttp.send();
  27.     }

  28.     function callback(){
  29.         var tmp = "status" + actiontype;
  30.         
  31.         var tmp2 = document.getElementById(tmp);

  32.         if(xmlHttp.readyState == 3){
  33.             tmp2.innerHTML = "loadding...";
  34.         }
  35.         if(xmlHttp.readyState == 4){
  36.             if(xmlHttp.status == 202){
  37.                 tmp2.innerHTML = "loadding...";
  38.             }
  39.             if(xmlHttp.status == 200){            
  40.                     var res = xmlHttp.respon***ML;               
  41.                     var result = res.getElementsByTagName("subdate");
  42.                     //clearstatus();
  43.                     for(var i=0;i<result.length;i++){
  44.                         var data = result[i].childNodes[0].nodeValue;
  45.                         var node = document.createElement("div")
  46.                         node.appendChild(document.createTextNode(data));
  47.                         tmp2.appendChild(node);
  48.                     }
  49.                 }
  50.             }
  51.         }
  52.    

  53.     function clearstatus(){
  54.         var tmp = "status" + actiontype;
  55.         var node = $(tmp);
  56.         while(node.hasChildNodes())    {
  57.             node.removeChild(node.childNodes[0]);
  58.         }
  59.     }

  60.     function test(){
  61.         //$('tmp').style.background = "green"
  62.         //alert($("tmp").innerHTML);
  63.         /*if($F("tmp").length >6){
  64.             $('tmp').style.background = "red";   
  65.         }else if($F("test").length <= 6){
  66.             $('tmp').style.background = "green";   
  67.         }*/
  68.     }
  69. </script>

  70. <div id="tmp" onmouseover="$('tmp').style.background = '#999999'" onmouseout="$('tmp').style.background = '#CCCCCC'" onclick="checktype(1)" style="width:100px; background:#CCCCCC;"> 读取数据1</div>
  71. <div id="status1"></div>

  72. <div id="tmp2" onmouseover="$('tmp2').style.background = '#999999'" onmouseout="$('tmp2').style.background = '#CCCCCC'" onclick="checktype(2)" style="width:100px; background:#CCCCCC;"> 读取数据2</div>
  73. <div id="status2"></div>
复制代码
data.php
  1. ';

  2. <?php

  3.     header("Content-Type:text/xml");

  4.     $type = $_GET['type'];

  5.     $xmlRes = '<?xml version="1.0" encoding="utf-8"?>';

  6.     if($type == 1){

  7.         $xmlRes = $xmlRes."

  8.         <datainfo>

  9.         <subdate>数据1</subdate>

  10.         <subdate>数据2</subdate>

  11.         <subdate>数据3</subdate>

  12.         </datainfo>

  13.         ";

  14.         echo $xmlRes;

  15.     }

  16.     else if($type==2){

  17.         $xmlRes = $xmlRes."

  18.         <datainfo>

  19.         <subdate>数据4</subdate>

  20.         <subdate>数据5</subdate>

  21.         <subdate>数据6</subdate>

  22.         </datainfo>

  23.         ";

  24.         echo $xmlRes;

  25.     }

  26. ?>
复制代码
[ 本帖最后由 大饼先生 于 2007-7-20 22:27 编辑 ]

闲看庭前花开花落

      
           漫随天外云卷云舒
      
差点忘记说明了,代码中的
$()相当于document.getElementById()
$F() 相当于document.getElementById().value()
,来自于prototype.js,这是一个很强大的JS库,可以从网上下载到。

闲看庭前花开花落

      
           漫随天外云卷云舒
      
传个另外的图~~多级菜单~~谁需要的话联系我啦,CAKEPHP+AJAX+MYSQL的,源码我就懒得贴了
现在可以用这个地址访问到http://case.blueidea.com/img/gettree.html

[ 本帖最后由 大饼先生 于 2007-8-14 12:22 编辑 ]
附件: 您所在的用户组无法下载或查看附件

闲看庭前花开花落

      
           漫随天外云卷云舒
      
返回列表