使用服务器端文件中的javascript填充下拉框
我有一个小网站，有一个下拉框，我希望我可以从托管服务器上的文件夹中填充该下拉框，下拉框中的每个项目都应该表示文件夹中每个文件的文件名 然后链接到一个按钮，该按钮将调用一个函数，将选定的数据加载到脚本中以可视化 我目前不确定是否将文件列表加载到应用程序中 到目前为止，我已经： 下拉列表（注意：使用jade）： 根据下拉框的内容运行脚本的函数：使用服务器端文件中的javascript填充下拉框,javascript,pug,Javascript,Pug,我有一个小网站，有一个下拉框，我希望我可以从托管服务器上的文件夹中填充该下拉框，下拉框中的每个项目都应该表示文件夹中每个文件的文件名 然后链接到一个按钮，该按钮将调用一个函数，将选定的数据加载到脚本中以可视化 我目前不确定是否将文件列表加载到应用程序中 到目前为止，我已经： 下拉列表（注意：使用jade）： 根据下拉框的内容运行脚本的函数： function loadDataSet(){ var dataSet = dataSetChoice.options[dataSetC
function loadDataSet(){
var dataSet = dataSetChoice.options[dataSetChoice.selectedIndex].text;
initialize(dataSet);
}
button(onclick='loadDataSet()') Load data
http://localhost/data/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /pje40</title>
</head>
<body>
<h1>Index of /pje40</h1>
<table>
<tr>
<th valign="top">
<img src="/icons/blank.gif" alt="[ICO]">
</th>
<th>
<a href="?C=N;O=D">Name</a>
</th>
<th>
<a href="?C=M;O=A">Last modified</a>
</th>
<th>
<a href="?C=S;O=A">Size</a>
</th>
<th>
<a href="?C=D;O=A">Description</a>
</th>
</tr>
<tr>
<th colspan="5"><hr></th>
</tr>
<tr>
<td valign="top">
<img src="/icons/back.gif" alt="[PARENTDIR]">
</td>
<td>
<a href="/">Parent Directory</a>
</td>
<td> </td>
<td align="right"> - </td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
<a href="week1">week1</a>
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
<a href="week2">week2</a>
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
<a href="week3">week3</a>
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<th colspan="5"><hr></th>
</tr>
</table>
<address>Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6 Server at localhost Port 80</address>
</body>
</html>
索引/pje40
索引/pje40
-
2013-12-06 19:28
119K
2013-12-06 19:28
119K
2013-12-06 19:28
119K
")
var返回\u html=$.trim（$（'http://localhost/pje40/'）.html（））；
var trs=$（返回了.find（'tr'）；
trs.拼接（0,2）；
trs.拼接（trs.长度-1,1）；
var目录_列表=[]；
对于（变量i=0；i
好的，下面是解决您的问题的方法示意图。我使用jQuery以某种方式简化DOM遍历
// Lets say `returned_html` it what came from server
var returned_html = $.trim($('#returned_html').html());
// We need to find all TRs and drop first two and the last one
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
// Now we should have 4 lines (with to Parent Directory one).
// Lets create list
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
正如您所看到的，它仍然需要一些后期处理
玩
更新
您可以使用
$.get('http://localhost/pje40/', function(html) {
process_listing(html);
});
您应该在回调中处理返回的数据，因为默认情况下，$.get（）
是异步的
但在这里您可能会遇到跨域请求问题。请阅读
另一种方法是创建隐藏的iframe
并加载http://localhost/pje40/
。然后做一些我在第一把小提琴上做过的事情
不用说，process\u listing（）
在本例中是
function process_listing(returned_html)
{
// We need to find all TRs and drop first two and the last one
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
// Now we should have 4 lines (with to Parent Directory one).
// Lets create list
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
}
函数进程列表（返回的html）
{
//我们需要找到所有的TR，放下前两个和最后一个
var trs=$（返回了.find（'tr'）；
trs.拼接（0,2）；
trs.拼接（trs.长度-1,1）；
//现在我们应该有4行（到父目录1）。
//让我们创建一个列表
var目录_列表=[]；
对于（变量i=0；i
您的服务器端呢？您是否尝试获取目录列表并使用JSON将其发送到客户端？或者您已经在web服务器上启用了目录列表，并希望使用JS解析它？我认为理想的情况是在客户端运行它？服务器上启用了目录列表，不能说我喜欢解析HTML的概念是JS。并不是说这很难，而是说它不太稳定，例如，目录列表的HTML可能会随着web服务器的升级而改变。但是，如果这是您想要的方式，请显示目录列表的HTML示例，以便我们可以帮助您。添加到原始问题您是否将jQuery与Ember一起使用？更新的初始问题
[
{
description: " ",
href: "/",
icon: "/icons/back.gif",
last_modified: " ",
name: "Parent Directory",
size: " - "
},
{
description: " ",
href: "week1",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week1",
size: "119K"
},
{
description: " ",
href: "week2",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week2",
size: "119K"
},
{
description: " ",
href: "week3",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week3",
size: "119K"
}
]
$.get('http://localhost/pje40/', function(html) {
process_listing(html);
});
function process_listing(returned_html)
{
// We need to find all TRs and drop first two and the last one
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
// Now we should have 4 lines (with to Parent Directory one).
// Lets create list
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
}