使用JavaScript從服務器端文件填充下拉框

Question

我有一個帶有下拉框的小站點，希望可以從托管服務器上的文件夾中填充該下拉框，下拉框中的每個項目都應代表該文件夾中每個文件的文件名。

然后將其鏈接到一個按鈕，該按鈕將調用函數將所選數據加載到腳本中以進行可視化。

我目前不確定將文件列表加載到應用程序中。

到目前為止，我有：

下拉列表（注意：使用翡翠）：

select#dataSetChoice

基於下拉框的內容運行腳本的函數：

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

按鈕事件：

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

我要做的只是基於此文件夾的內容填充下拉列表：

http://localhost/data/

編輯：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>

jQuery應該看起來像這樣：

腳本（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

好了，這是可以解決您的問題的草圖。 我已經使用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()
    });
}

您將進入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"
    }
]

如您所見，它仍然需要一些后期處理。

小提琴玩。

更新資料

您可以使用以下方式獲取目錄列表

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

您應該在回調中處理返回的數據，因為默認情況下$.get()是異步的。

但是您可以在這里遇到跨域請求問題。 請閱讀有關CORS的信息。

另一種方法是創建隱藏的iframe並加載http://localhost/pje40/ 。 然后做一些像我在第一次提琴中所做的一樣。

不用說在這種情況下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