javascript - 通过 csv/json 填充的 html/javascript 中的容器列表

Question

我是网络开发的新手。我正在尝试使用类似列表的容器创建一个网页，其中列出了目录中包含的所有 *.html 文件。鼠标单击其中一个列出的名称会在同一页面上的另一个容器中显示 .html。

我正在考虑将 .html 文件的文件名存储在 csv 或 json 文件中，以便于通过 javascript 阅读并填充类似列表的容器。

我真的很感激有关如何实现这一目标的任何指示。

谢谢。

Answer 1

You need a good server side solution to read your files/csv and service the data to your front end - you could also use node as a solution - but both of those topics are outside of scope here (at the least, I'm probably not the best person to answer them, and the answers I give would lead to many more questions).

to do the front end bit - you should use jQuery, because it will simplify a lot of things for you.

if you've got your json string (probably just an array in this case) and it inflates/parses to something like this:

Parsed JSON:

files = [
  'file1.html',
  'file2.html',
  ...etc...
];

you can push these into an empty, existing UL element as follows:

HTML:

<ul id="list"></ul>
<div id="pageHTML"></div>

Javascript/jQuery:

$(document).ready(function() {

    var $list = $('#list'),
        $html = $('#pageHTML');

    for(var i = 0; i < files.length; i++){
       $list.append('<li><a href="/path/to/'+files[i]+'">'+files[i]+'</a></li>');
    }

    // when a link is clicked, we can load the content via ajax
    $list.on('click', 'a', function(e){
        e.preventDefault();
        $html.load(this.href);
    });

});

Jquery simplifies & makes it a lot easier to read what's going on here compared with the standard javascript version linked to in @NullPointerException's answer.

XMLHTTPRequest is also are a very complicated field. As a new developer, there are lots of potential pitfalls along the way if you decide to "roll your own" solution. Probably a better idea to let jQuery handle the heavy lifting for you.

Answer 2

看看这个问题

您可以从 JSON 中读取 HTML 列表并将它们显示为列表，然后按照此问题在同一页面中加载内容