单击一下即可调用两个ajax函数

Question

我在div中有一些文件夹，这些文件夹的内容显示在树状视图中(当单击小加号按钮时)，使用以下代码：

echo '<span class="toggle" onclick="getchildren(\''.$objectnode["fid"].'\', \'childdiv'.$objectnode["fid"].'\');" ></span>';

单击文件夹时，它的内容将显示在另一个div中，并使用以下代码与之平行：

<a href="#" onClick="getcontents('<?php echo $objectnode["fid"]; ?>', 'foldercontentsdiv', '<?php echo $objectnode["path"].$objectnode["object_name"]."/"  ?>','foldercontents');" class="<?php echo $objectnode["object_type"]=='folder'? 'folder': 'document'; ?>"><span><?php echo $objectnode["object_name"]; ?></span></a>

现在我想做的是，当我点击文件夹名称时，它的内容应该被加载到与它平行的div中，同时它的子节点也应该是可见的或展开的。任何帮助我们都将不胜感激。

Answer 1

只需调用两个ajax即可。Ajax调用是异步的，您可以进行任意数量的调用。例如，您可以这样做：

function ajax(){
    var xmlhttp =  new XMLHttpRequest();
    xmlhttp.open('POST', 'yourpage.php', true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            // Your callback code goes here
            xmlhttp.responseXML; // this is the response data
        }
    };
    xmlhttp.send(yourdatahere);

    var xmlhttp2 =  new XMLHttpRequest();
    xmlhttp2.open('POST', 'yourpage.php', true);
    xmlhttp2.onreadystatechange = function() {
        if (xmlhttp2.readyState == 4) {
            // Your callback code goes here
            xmlhttp2.responseXML; // this is the response data
        }
    };
    xmlhttp2.send(yourdatahere);
}

从你的onclick函数调用这个函数，这样就可以了。您还可以嵌套函数调用。例如，如果您正在等待来自第一个调用的数据，则将第二个ajax调用放入第一个调用的回调中，并执行所有更新。您无需等待第二个ajax调用返回即可更新DOM。

您还可以为每个子节点发出单独的ajax调用，如果您希望对所有子节点执行此操作，则必须执行一些递归操作，例如：

function ajax(parentNode){
    var xmlhttp =  new XMLHttpRequest();
    xmlhttp.open('POST', 'yourpage.php', true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            // Your callback code goes here
            xmlhttp.responseXML; // this is the response data
            // do stuff with responseXML
        }
    };
    xmlhttp.send(yourdatahere);

    var i;
    for(i = 0; i < parentNode.childNodes.length; i++){
        ajax(parentNode.childNodes[i]);
    };
}

已经有为此制作的插件。我知道jQuery有一个适用于它的框架。我自己建了一个，因为它不是我想要的。我希望这能帮到你!