使用jquery或Ajax將服務器上的目錄hirerachy填充到多個html下拉列表

Question

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

我有以下服務器上的目錄層次結構。

我想動態獲取文件層次到下拉這樣

的「搜索」按鈕，下載網址的OnClick（如下圖所示），與選定的下拉值應該出現 「 http://abc.def.com/ProductName1/Series1.1/FileName1.1.zip「

我明白完成此操作的最佳方法是使用jQuery和Ajax。
如何使服務器上「產品名稱」的目錄層次結構動態顯示？當選擇新產品名稱時，相應的「產品系列」和「文件」會發生變化嗎？

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>