使用JavaScript从服务器端文件填充下拉框

Question

I have a small site that has a dropdown box which I hope I can populate from a folder on a hosted server, each item in the dropdown box should represent the file name of each file in the folder. 我有一个带有下拉框的小站点，希望可以从托管服务器上的文件夹中填充该下拉框，下拉框中的每个项目都应代表该文件夹中每个文件的文件名。

This is then linked to a button which will call a function load selected data into a script to visualize. 然后将其链接到一个按钮，该按钮将调用函数将所选数据加载到脚本中以进行可视化。

I am currently unsure about loading the file list into the application. 我目前不确定将文件列表加载到应用程序中。

so far I have: 到目前为止，我有：

drop down list (note: using jade): 下拉列表（注意：使用翡翠）：

select#dataSetChoice

the function to run a script based on the contents of the drop down box: 基于下拉框的内容运行脚本的函数：

    function loadDataSet(){
      var dataSet = dataSetChoice.options[dataSetChoice.selectedIndex].text;
      initialize(dataSet);
    }

the button event: 按钮事件：

  button(onclick='loadDataSet()') Load data

all I need to do down is populate the drop box list based on the contents of this folder: 我要做的只是基于此文件夹的内容填充下拉列表：

http://localhost/data/

Edit: html directory listing as requested 编辑：html目录列表按要求

<!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>&nbsp;</td>
            <td align="right">  - </td>
            <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

Should the jquery look similar to this: jQuery应该看起来像这样：

script(src=' http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js ') 脚本（src =' http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js '）

var returned_html = $.trim($('http://localhost/pje40/').html());

var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);

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()
    });
}

alert(directory_list.length);

Answer 1

Well here is the sketch of what can be done with your problem. 好了，这是可以解决您的问题的草图。 I have used jQuery to somehow ease DOM traversion 我已经使用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()
    });
}

You'll get in directory_list : 您将进入directory_list ：

[
    {
        description: "&nbsp;",
        href: "/",
        icon: "/icons/back.gif",
        last_modified: "&nbsp;",
        name: "Parent Directory",
        size: "  - "
    },
    {
        description: "&nbsp;",
        href: "week1",
        icon: "/icons/unknown.gif",
        last_modified: "↵                2013-12-06 19:28↵            ",
        name: "week1",
        size: "119K"
    },
    {
        description: "&nbsp;",
        href: "week2",
        icon: "/icons/unknown.gif",
        last_modified: "↵                2013-12-06 19:28↵            ",
        name: "week2",
        size: "119K"
    },
    {
        description: "&nbsp;",
        href: "week3",
        icon: "/icons/unknown.gif",
        last_modified: "↵                2013-12-06 19:28↵            ",
        name: "week3",
        size: "119K"
    }
]

As you can see it still needs some post processing. 如您所见，它仍然需要一些后期处理。

Fiddle to play with. 小提琴玩。

Update 更新资料

You can get directory listing with 您可以使用以下方式获取目录列表

$.get('http://localhost/pje40/', function(html) {
    process_listing(html);
});

You should proccess returned data in callback because $.get() is async by default. 您应该在回调中处理返回的数据，因为默认情况下$.get()是异步的。

But you can run into cross domain request problem here. 但是您可以在这里遇到跨域请求问题。 Please read about CORS . 请阅读有关CORS的信息。

The other way would be to create hidden iframe and load http://localhost/pje40/ . 另一种方法是创建隐藏的iframe并加载http://localhost/pje40/ 。 Then do some thing like I've done in my first fiddle. 然后做一些像我在第一次提琴中所做的一样。

Needless to say that process_listing() in this case is 不用说在这种情况下process_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()
        });
    }
}

使用JavaScript从服务器端文件填充下拉框

问题描述

1 个解决方案

解决方案1
0 2013-12-08 13:35:26

使用JavaScript从服务器端文件填充下拉框

问题描述

1 个解决方案

解决方案1 0 2013-12-08 13:35:26

解决方案1
0 2013-12-08 13:35:26