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

Question

目前我正在重建我的雇主的静态网站，我需要整合一个新闻部分。我正在使用 Bootstrap 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可以做到，它已经在Bootstrap框架中了。

这样每当新闻更新（可能一年两次）时，无需触摸 HTML，只需替换 .txt 文件即可。

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

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

提前致谢！

-马库斯

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>";
       });
    });

});