静态网站中的伪动态新闻部分

Question

目前，我正在重建我的雇主的静态网站，我需要整合一个新闻部分。我正在构建的网站使用引导3.0框架。

我想使用以下方法：

有一个JavaScript，它从带有JSON的.txt文件中读取数据。例如：

{
"newssection": 
 [
  { "news-date":"Nov. 2013" , "news-header":"Some news 1" , "news-content":"Text 1"}, 
  { "news-date":"Jan. 2014" , "news-header":"Some news 2" , "news-content":"Text 2"}, 
  { "news-date":"Dec. 2014" , "news-header":"Some news n" , "news-content":"Text n"}, 
 ]
}

基本上，我希望解析JSON数据，并在网站的新闻部分填充相应的div。我认为jQuery可以做到，它已经在引导框架中了。

因此，每当新闻被更新(可能每年两次)，就没有必要去触摸HTML，而只是简单地替换.txt文件。

在这里，我的问题开始了:我不是程序员，也不知道这样的JavaScrip会是什么样子。如果有人手头有一个JavaScrip JSON解析器，以及一些代码示例，那么如何用适当的新闻数据填充div id="xyz“。

此外，如果有更好的解决方案，请告诉我。CMS不是一种选择。也许最简单的方法是将JavaScript中的新闻数据集成到.js文件中，因此在出现新消息时，只需要更新.js文件。如前所述，我不是程序员，我愿意接受所有的建议和帮助。

提前感谢！

-Markus

Answer 1

如果你把HTML放在里面，你就可以

$(function(){
    $("#IdOfWhereToOutPut").load("theFile.txt");
});

对于JSON

$( function () {

    $.getJSON("foo.json", function(data) {
        var str = "";
        $.each( data.newssection, function( key, val ) {
            str += "<h3>" + val["news-header"] + "</h3><p>" + val["news-content"] + "</p>";
       });
    });

});