javascript - 使用jquery或Ajax将服务器上的目录hirerachy填充到多个html下拉列表

Question

我是使用 jQuery 和 Ajax 的初学者。

我的服务器上有以下目录层次结构。

我想将文件层次结构动态地放入下拉列表中，如下所示

单击“搜索”按钮时，应出现带有所选下拉值的下载 URL(如下所示)“http://abc.def.com/ProductName1/Series1.1/FileName1.1.zip”

我知道实现这一点的最佳方法是使用 jQuery 和 Ajax。
如何使服务器上“产品名称”的目录层次结构动态显示？当选择新的产品名称时，相应的“产品系列”和"file"会发生变化吗？

Answer 1

这只是一个真正的基本布局。这个特定的解决方案会自行调用，但您可以将其拆分为两个页面。要进行多次调用来构建下拉菜单，您可能可以使用一个函数，因为当您深入文件夹时，逻辑可能会重复:

index.php

<?php
    error_reporting(E_ALL);
    if(isset($_POST['scan']) && !empty($_POST['scan'])) {
        // For your convenience, you can see what returns
        print_r($_POST);
        $filter[]   =   '.';
        $filter[]   =   '..';
        // Decode directory string from form
        $dir        =   base64_decode(urldecode($_POST['dir']));
        // Add root (you may have defined a root, but I am
        // using the server document root key/value
        $current    =   str_replace("//","/",$_SERVER['DOCUMENT_ROOT'].$dir);
        // Check that the directory exists
        if(is_dir($current)) {
            // Scan this directory
            $files  =   scandir($current);
            // If there are folders/files
            if(!empty($files)) { ?>
        <label>Series</label>
        <select name="series">
            <?php
                foreach($files as $infolder) {
                    // If just return directories
                    if(is_dir($current.$infolder) && !in_array($infolder,$filter)) { ?>
                        <option name="<?php echo urlencode(base64_encode($infolder)); ?>"><?php echo substr($infolder,0,20); ?></option>
                    <?php
                    }
                } ?>
        </select>
            <?php
            }
        }
        // Exit so you don't continue to print the bottom stuff
        // Which is what you would load in the first place
        exit;
    }

// These are just fake, obviously. You can populate the
// first dropdown however you want
$dir        =   "/root/";
$dir2   =   "/root/folder1/";
?>

<form id="get_files" method="post">
    <input type="hidden" name="scan" value="true" />
    <select name="dir">
        <!-- This encoding just makes it easier to transport this data -->
        <!-- base64 is probably itself sufficient -->
        <option value="<?php echo urlencode(base64_encode($dir)); ?>"><?php echo substr($dir,0,10); ?></option>
        <option value="<?php echo urlencode(base64_encode($dir2)); ?>"><?php echo substr($dir2,0,10); ?></option>
    </select>
    <div id="form_load"></div>
    <input type="submit" value="submit" />
</form>

<!-- jQUERY LIBRARIES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<!-- jQUERY AJAX -->
<script>
    $("#get_files").submit(function() {
        $.ajax({
                url: 'index.php',
                data: $(this).serialize(),
                type: 'POST',
                success: function(response) {
                    $("#form_load").html(response);
                }
        });
        return false;
    });
</script>