无后台的网站 内容暂存json

当网站无后台时,将数据暂存储为json文档,然后通过调用json文件获取数据填充前端页面

 

存储json格式的文件

[
  { "id": 1, "cat": "新闻", "title": "这是第1个新闻" },
  { "id": 2, "cat": "活动", "title": "这是第2个新闻" },
  { "id": 3, "cat": "别的", "title": "这是第3个新闻" }
]

 

<script>
$(document).ready(function() {
$.get("index.json?" + new Date().getTime(), function(result) {
console.log(result);
setNewsList(result);
setNewsCates(result);
setNewsContent(result, T.getQueryString("id"));
});
});

function setNewsList(data) {
var htmlTemplate = "<div><a href='json.test.html?id={id}'>{title}</a></div>";
var list = $("#newsList");
for (var i = 0; i < data.length; i++) {
list.append(T.formatEx(htmlTemplate, data[i]));
}
};

function setNewsCates(data) {
var htmlTemplate = "<div><a href='json.test.html?cate={cat}'>{cat}</a></div>";
var list = $("#newsCates");
var output = new Object();
for (var i = 0; i < data.length; i++) {
if (output[data[i].cat]) continue;
list.append(T.formatEx(htmlTemplate, data[i]));
output[data[i].cat] = true;

}
};

function setNewsContent(data, id) {
for (var i = 0; i < data.length; i++) {
if (data[i].id != id) continue;
$("#newsContentTitle").html(data[i].title);
$.get("news/" + id + ".html", function(result) {
$("#newsContentBody").html(result);
});
}
};
</script>

 

 

 

 

posted @ 2016-11-30 15:56  lynnekanuo  阅读(250)  评论(0编辑  收藏  举报