Question

我可以使用以下代码显示服务器上文件夹中所有文件的列表：

$(document).ready(function() {
  $.get("/mockups/bryan/file_list/", function(allFiles) {
    $("#fileNames").append(allFiles);
    console.log(allFiles);
  });
})

但是，它检索的数据是由我的服务器生成的完全格式化的网页，如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
 <head>
  <title>Index of /mockups/bryan/file_list</title>
 </head>
 <body>
<h1>Index of /mockups/bryan/file_list</h1>
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a>                    <a href="?C=M;O=A">Last modified</a>      <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[PARENTDIR]"> <a href="/mockups/bryan/">Parent Directory</a>                             -   
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_CTA.jpg">092018-powersale_CTA..&gt;</a> 2018-09-19 09:57  7.2K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_cat1.jpg">092018-powersale_cat..&gt;</a> 2018-09-19 09:26   41K 
...

我只想要一个包含该文件夹中所有文件名称的数组，这样我就可以创建自己的页面来显示和链接到它们。

有更好的方法吗？也许.get（）是使用错误的工具，或者我使用的是错误的工具。（或者两者兼有。）我正要研究一些RegEx东西，以提取我想要的信息，但后来想到“有 has 是更好的方法！”

Answer 1

是的，有比RegExp更好的方法。在响应文本中创建一个documentFragment，然后从中提取链接。像这样：

$.get("/mockups/bryan/file_list/", function (allFiles) {
    let fragment = document.createDocumentFragment();
    let wrapper = document.createElement('div');
    let fileNames = [];
    // Put allFiles to the newly-created div
    wrapper.innerHTML = allFiles;
    // Append the elements from the div to the documentFragment
    Array.from(wrapper.childNodes).forEach(node => 
        fragment.appendChild(node);
    });
    // Collect links, and extract hrefs to fileNames array
    let links = fragment.querySelectorAll('a');
    let len = links.length;
    for (let n = 5; n < len; n++) { // Starting from 5 excludes the list headers
        fileNames.push(links[n].getAttribute('href'));
    }
    // Append filenames list to the page
    $("#fileNames").append(fileNames.join('<br>'));
});

警告！仅用于本地网络。不建议使用此代码在公共Web服务器上读取文件夹内容，使用服务器端代码将文件名发送给客户端。

将DTD和html，head和body标签添加到div有点琐，但是设置innerHTML会删除这些标签，而只会添加相关内容。

我已经从href属性中提取了文件名，但是如果链接文本不错，则可以使用textContent属性而不是getAttribute方法。读取链接的href属性通常会将完整路径添加到该值。

使用.get（）检索服务器上文件夹中所有文件名的数组

1 个答案: