我是网络开发的新手。我正在尝试使用类似列表的容器创建一个网页,其中列出了目录中包含的所有 *.html 文件。鼠标单击其中一个列出的名称会在同一页面上的另一个容器中显示 .html。
我正在考虑将 .html 文件的文件名存储在 csv 或 json 文件中,以便于通过 javascript 阅读并填充类似列表的容器。
我真的很感激有关如何实现这一目标的任何指示。
谢谢。
我是网络开发的新手。我正在尝试使用类似列表的容器创建一个网页,其中列出了目录中包含的所有 *.html 文件。鼠标单击其中一个列出的名称会在同一页面上的另一个容器中显示 .html。
我正在考虑将 .html 文件的文件名存储在 csv 或 json 文件中,以便于通过 javascript 阅读并填充类似列表的容器。
我真的很感激有关如何实现这一目标的任何指示。
谢谢。
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.
看看这个问题
您可以从 JSON 中读取 HTML 列表并将它们显示为列表,然后按照此问题在同一页面中加载内容