我是使用jQuery和Ajax的初学者。
我在服务器上有以下目录层次结构。
我想像这样动态地将文件层次结构放入下拉列表中
OnClick of" Search"按钮,应显示带有所选下拉值的下载URL(如下所示) " http://abc.def.com/ProductName1/Series1.1/FileName1.1.zip"
我知道实现这一目标的最佳方法是使用jQuery和Ajax。
如何制作"产品名称"的目录层次结构?在服务器上动态显示?以及相应的"产品系列"和"文件"每当选择新的产品名称时更改?
答案 0 :(得分:0)
这是一个真正的基本布局。这个特殊的解决方案会自行调用,但您可以将其拆分为两页。要进行多次调用以构建下拉列表,您可能可以使用函数,因为在向下钻取文件夹时逻辑可能会重复:
<强>的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>