PHP服务器文件管理器开发小结（三）：使用jQuery提交AJAX请求

浏览数：35 / 时间：2015年06月09日

本节将讨论使用jQuery提交AJAX请求的基本方法，并完成显示首文件夹的基本方法。

同时，本节也将讨论使用图片链接提交请求的基本方法。

jQuery是一套强大的JS库，将复杂的JS操作封装成简洁的语句，并提供对AJAX的支持。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
——w3school

下面这段html用于显示文件夹列表上方的菜单项

<ul id="navi">
        <li><a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" /></a></li>
        <li><a href="#" title="up" onClick="onUp()"><img src="images/upfolder48.png" class="topmenu" /></a></li>
        <li><a href="#" title="refresh" onClick="onRefresh()"><img src="images/listrefresh48.png" class="topmenu" /></a></li>
        <li><a href="#" title="upload" onClick="onUploadFile()"><img src="images/upload48.png" class="topmenu" /></a></li>
        <li><a href="#" title="new file" onClick="onNewFile()"><img src="images/newfile48.png" class="topmenu" /></a></li>
        <li><a href="#" title="new folder" onClick="onNewFolder()"><img src="images/newfolder48.png" class="topmenu" /></a></li>
</ul><br/>

注意该ul应用到的css

ul li{
list-style: none;
float: left;
}
#navi a{
display: block;
width: 48px;
height: 48px;
margin-left: 0.5em;
}

其中，li的样式使得其取消了前置的符号，并转化为向左浮动的内联元素，而不是默认的纵向排列的块状元素。a的样式固定了显示的状态、大小和左边距。

显示效果如下：

具体到最左侧的Home，其采用了图片链接的方式，通过点击链接向服务器发送请求。

<a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" /></a>

注意该链接的目的地址为"#"，这样就不会跳转，而是为点击事件onClick响应了onHome()函数。

.topmenu{
width: 48px;
height: 48px;
}

这个样式固定了图片的显示大小。

onHome()函数需要完成以下流程：

使用AJAX向服务器发送获取首文件夹内容的请求;
接收服务器返回的内容，并显示到预定的位置。

使用jQuery发送AJAX请求的基本语法是：

$.get(URL,callback);
$.post(URL,data,callback);

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

由于本管理器可能会对一个文件夹的内容反复刷新，因此更适合使用POST获取内容。

以下是onHome()的代码内容：

function onHome()
{
    var strDirName = "home";
    var strEncodedName = escape(strDirName);
    $.post("query.php", {act:strEncodedName}, function (data) {
        $(‘#spanDirTable‘).html(data);
    });
}

其中，spanDirTable是网页上的一个div，用来显示文件夹的内容。

使用$.post函数，将home字符串放在act表单中并post给query.php，query.php处理该请求并返回文件夹内容data，之后将该data置换到spanDirTable的内容中。

以下是query.php中节选的处理该请求的语句段。

        $strActName = urldecode($_POST["act"]);
        switch ($strActName)
        {
            case "home":
                $isDirContentView = true;
                $strDirName = "/home";
                break;
        }
        if ($isDirContentView)
        {
            echo createDirContentTable($strDirName);
        }

PHP中通过$_POST预留字来获取POST的值，因此使用$_POST["act"]可以获取act表单中的值。

本管理器将HOME默认置为了"/home"，以避免对系统的损害。事实上，也可以定义成其他更加不会损害系统的位置。

createDirContentTable($strDirName)函数将返回创建的文件夹内容列表，并通过echo显示到POST请求的返回流中。

function createDirContentTable($strDirName)
{
    $isSuceed = true;
    if (!($hDir = opendir($strDirName)))
    {
        echo "Directory ‘$strDirName‘ unavailable!";
        $isSuceed = false;
    }
    if ($isSuceed)
    {
        printf("<p class=\"page-title\">%s</p>", $strDirName);
echo <<<NAVI
        <ul id="navi">
        <li><a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" /></a></li>
        <li><a href="#" title="up" onClick="onUp()"><img src="images/upfolder48.png" class="topmenu" /></a></li>
        <li><a href="#" title="refresh" onClick="onRefresh()"><img src="images/listrefresh48.png" class="topmenu" /></a></li>
        <li><a href="#" title="upload" onClick="onUploadFile()"><img src="images/upload48.png" class="topmenu" /></a></li>
        <li><a href="#" title="new file" onClick="onNewFile()"><img src="images/newfile48.png" class="topmenu" /></a></li>
        <li><a href="#" title="new folder" onClick="onNewFolder()"><img src="images/newfolder48.png" class="topmenu" /></a></li>
        </ul><br/>
NAVI
;
        echo "<table>";
        echo "<tr><th>Name</th><th>Type</th><th>Readalbe</th><th>Writable</th><th>Excutable</th><th>Size</th><th>Created</th><th>Modified</th><th>Access</th><th>Operation</th></tr>";
        while (($fileName = readdir($hDir))!==false)
        {
            if ($fileName == "." || $fileName == "..") continue;
            if (is_file($strDirName."/".$fileName))
                $fileList[] = $fileName;
            if (is_dir($strDirName."/".$fileName))
                $dirList[] = $fileName;
        }
        $isDirEmpty = true;
        if (isset($dirList))
        {
            $isDirEmpty = false;
            natsort($dirList);
            foreach($dirList as $dirName)
            {
                echo getDirElemInfo($strDirName, $dirName);
            }
        }
        if (isset($fileList))
        {
            $isDirEmpty = false;
            natsort($fileList);
            foreach($fileList as $fileName)
            {
                echo getFileElemInfo($strDirName, $fileName);
            }
        }
        echo "</table>";
        if ($isDirEmpty)
        {
            echo "Directory ‘$strDirName‘ is Empty!";
        }
        else echo "<div class=\"\">Total size: ".sizeToBytes(calcDirSize($strDirName))."</div>";
        closedir($hDir);
    }
}

浏览文件夹下内容的方法流程比较固定：