随便乱写的一个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. 
    
14.     function checktype(type){
    
15.         actiontype = type;
    
16.         var tmp = "status" + actiontype;        
    
17.         var tmp2 = document.getElementById(tmp);
    
18.         if(tmp2.innerHTML == "")
    
19.             doAction();
    
20.         else clearstatus();
    
21.     }
    
22. 
    
23.     function doAction(){
    
24.         
    
25.         createXMLHttp();
    
26.         xmlHttp.onreadystatechange = callback;
    
27.         xmlHttp.open("GET","data.php?type="+actiontype+"&timestamp="+new Date().getTime());
    
28.         xmlHttp.send();
    
29.     }
    
30. 
    
31.     function callback(){
    
32.         var tmp = "status" + actiontype;
    
33.         
    
34.         var tmp2 = document.getElementById(tmp);
    
35. 
    
36.         if(xmlHttp.readyState == 3){
    
37.             tmp2.innerHTML = "loadding...";
    
38.         }
    
39.         if(xmlHttp.readyState == 4){
    
40.             if(xmlHttp.status == 202){
    
41.                 tmp2.innerHTML = "loadding...";
    
42.             }
    
43.             if(xmlHttp.status == 200){            
    
44.                     var res = xmlHttp.respon***ML;               
    
45.                     var result = res.getElementsByTagName("subdate");
    
46.                     //clearstatus();
    
47.                     for(var i=0;i<result.length;i++){
    
48.                         var data = result[i].childNodes[0].nodeValue;
    
49.                         var node = document.createElement("div")
    
50.                         node.appendChild(document.createTextNode(data));
    
51.                         tmp2.appendChild(node);
    
52.                     }
    
53.                 }
    
54.             }
    
55.         }
    
56.    
    
57. 
    
58.     function clearstatus(){
    
59.         var tmp = "status" + actiontype;
    
60.         var node = $(tmp);
    
61.         while(node.hasChildNodes())    {
    
62.             node.removeChild(node.childNodes[0]);
    
63.         }
    
64.     }
    
65. 
    
66.     function test(){
    
67.         //$('tmp').style.background = "green"
    
68.         //alert($("tmp").innerHTML);
    
69.         /*if($F("tmp").length >6){
    
70.             $('tmp').style.background = "red";   
    
71.         }else if($F("test").length <= 6){
    
72.             $('tmp').style.background = "green";   
    
73.         }*/
    
74.     }
    
75. </script>
    
76. 
    
77. <div id="tmp" onmouseover="$('tmp').style.background = '#999999'" onmouseout="$('tmp').style.background = '#CCCCCC'" onclick="checktype(1)" style="width:100px; background:#CCCCCC;"> 读取数据1</div>
    
78. <div id="status1"></div>
    
79. 
    
80. <div id="tmp2" onmouseover="$('tmp2').style.background = '#999999'" onmouseout="$('tmp2').style.background = '#CCCCCC'" onclick="checktype(2)" style="width:100px; background:#CCCCCC;"> 读取数据2</div>
    
81. <div id="status2"></div>

复制代码

data.php

1. ';
   
2. 
   
3. <?php
   
4. 
   
5.     header("Content-Type:text/xml");
   
6. 
   
7.     $type = $_GET['type'];
   
8. 
   
9.     $xmlRes = '<?xml version="1.0" encoding="utf-8"?>';
   
10. 
    
11.     if($type == 1){
    
12. 
    
13.         $xmlRes = $xmlRes."
    
14. 
    
15.         <datainfo>
    
16. 
    
17.         <subdate>数据1</subdate>
    
18. 
    
19.         <subdate>数据2</subdate>
    
20. 
    
21.         <subdate>数据3</subdate>
    
22. 
    
23.         </datainfo>
    
24. 
    
25.         ";
    
26. 
    
27.         echo $xmlRes;
    
28. 
    
29.     }
    
30. 
    
31.     else if($type==2){
    
32. 
    
33.         $xmlRes = $xmlRes."
    
34. 
    
35.         <datainfo>
    
36. 
    
37.         <subdate>数据4</subdate>
    
38. 
    
39.         <subdate>数据5</subdate>
    
40. 
    
41.         <subdate>数据6</subdate>
    
42. 
    
43.         </datainfo>
    
44. 
    
45.         ";
    
46. 
    
47.         echo $xmlRes;
    
48. 
    
49.     }
    
50. 
    
51. ?>

复制代码

[ 本帖最后由 大饼先生 于 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 编辑 ]