大饼先生

menu.php是测试联级菜单，data.php模拟后台，使用xml传递数据。menu.php:

复制内容到剪贴板

代码:

<script type="text/javascript" src=../js/prototype.js?></script>
<script>
    var xmlHttp;
    var actiontype;
   
    function createXMLHttp(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
    }

    function checktype(type){
        actiontype = type;
        var tmp = "status" + actiontype;        
        var tmp2 = document.getElementById(tmp);
        if(tmp2.innerHTML == "")
            doAction();
        else clearstatus();
    }

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

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

        if(xmlHttp.readyState == 3){
            tmp2.innerHTML = "loadding...";
        }
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 202){
                tmp2.innerHTML = "loadding...";
            }
            if(xmlHttp.status == 200){            
                    var res = xmlHttp.respon***ML;               
                    var result = res.getElementsByTagName("subdate");
                    //clearstatus();
                    for(var i=0;i<result.length;i++){
                        var data = result[i].childNodes[0].nodeValue;
                        var node = document.createElement("div")
                        node.appendChild(document.createTextNode(data));
                        tmp2.appendChild(node);
                    }
                }
            }
        }
   

    function clearstatus(){
        var tmp = "status" + actiontype;
        var node = $(tmp);
        while(node.hasChildNodes())    {
            node.removeChild(node.childNodes[0]);
        }
    }

    function test(){
        //$('tmp').style.background = "green"
        //alert($("tmp").innerHTML);
        /*if($F("tmp").length >6){
            $('tmp').style.background = "red";   
        }else if($F("test").length <= 6){
            $('tmp').style.background = "green";   
        }*/
    }
</script>

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

<div id="tmp2" onmouseover="$('tmp2').style.background = '#999999'" onmouseout="$('tmp2').style.background = '#CCCCCC'" onclick="checktype(2)" style="width:100px; background:#CCCCCC;"> 读取数据2</div>
<div id="status2"></div>

data.php

复制内容到剪贴板

代码:

';

<?php

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

    $type = $_GET['type'];

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

    if($type == 1){

        $xmlRes = $xmlRes."

        <datainfo>

        <subdate>数据1</subdate>

        <subdate>数据2</subdate>

        <subdate>数据3</subdate>

        </datainfo>

        ";

        echo $xmlRes;

    }

    else if($type==2){

        $xmlRes = $xmlRes."

        <datainfo>

        <subdate>数据4</subdate>

        <subdate>数据5</subdate>

        <subdate>数据6</subdate>

        </datainfo>

        ";

        echo $xmlRes;

    }

?>

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

ra3o

还没有机会尝试一下 帮顶

----------------------------------------------------------
个性签名：我爱笑....We provide all WoW Gold services. You can buy Cheap wow gold here! Welcome to our website for you World of Warcraft Gold,wow gold,Cheap World of Warcraft Gold,buy cheap wow gold, real WoW Power Leveling.......WoW Power Leveling,.. .