2013-12-12 44 views
0

目前我正在重建我的僱主的靜態網站,我需要整合一個新聞部分。我正在使用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文件。如上所述,我不是程序員,並且願意接受所有建議和幫助。

提前致謝!

-Markus

+1

瀏覽器可以對自己的解析JSON。儘管如此,一個更好的解決方案是做這個服務器端或大多數爬蟲不會看到你的內容。爲什麼CMS不是一種選擇? – Brad

回答

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

}); 
+0

把HTML放在文本文件中是相當不錯的解決方案......事情有時候可以這麼簡單。謝謝! – user3096434