当网站无后台时,将数据暂存储为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>

无后台的网站 内容暂存json的更多相关文章

  1. Git撤销暂存区stage中的内容

    $ git add readme.txt提交到了stage中. $ git statusOn branch masterChanges to be committed:  (use "git ...

  2. DEDECMS织梦后台更新网站栏目无反应一键更新无响应的解决方法

    很多站长朋友反应,经常会遇到DEDECMS织梦后台更新网站栏目无反应和一键更新无响应的问题,这个问题的所在就是在于恢复了数据或者覆盖了织梦后台文件之后,点击一键更新完全没反应,或者生成栏目的时候其他都 ...

  3. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  4. Git学习笔记(2)——版本的回退,和暂存区的理解

    本文主要记录了版本的回退,以及工作区,暂存区概念的理解. //开始之前,先回顾上次的内容,修改文件如下,并提交到版本库. Git is a distributed version control sy ...

  5. git 查看暂存区

    一.简介 git ls-files 命令是用来查看暂存区中文件信息 二.常用参数 参数说明(括号里是简写) --cached(-c)显示暂存区中的文件,git ls-files命令默认的参数 --de ...

  6. GIt学习第二天之版本回退、工作区和暂存区

    搬运自 ‘廖雪峰的官方网站’ 地址:https://www.liaoxuefeng.com/ 1.版本回退 在Git中,我们用git log命令显示从最近到最远的提交日志,如果嫌输出信息太多,看得眼花 ...

  7. 小丁带你走进git的世界二-工作区暂存区分支

    小丁带你走进git的世界二-工作区暂存区分支 一.Git基本工作流程 1.初始化一个仓库 git  init git  clone git仓库分为两种情况: 第一种是在现有项目或目录下导入所有文件到 ...

  8. Git学习(三)——暂存区、远程仓库、增删改管理

    一.工作区和暂存区 工作区(Working Directory) 就是在你的电脑里能看到的目录 版本库(Repository) 工作区中的一个隐藏目录.git,这个不算工作区,而是Git版本库.Git ...

  9. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

随机推荐

  1. SQLserver 备份和还原 失败

    错误一: 备份对于服务器“xxxxxx”失败. System.Data.SqlClient.SqlError: 无法使用备份文件 'C:\Program Files\Microsoft SQL Ser ...

  2. 开启关闭keditor 过滤

    filterMode: false, K.create('#txt_content', { uploadJson: '/js/kindeditor-4.1.10/upload_json.ashx', ...

  3. React Native 打包.jsx文件

    最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是 ...

  4. golang调用EXE

    我是win7+go1.7+liteide,调用calc.exe package main import ( "os/exec" ) func main() { datapath : ...

  5. one recursive approach for 3, hdu 1016 (with an improved version) , permutations, N-Queens puzzle 分类: hdoj 2015-07-19 16:49 86人阅读 评论(0) 收藏

    one recursive approach to solve hdu 1016, list all permutations, solve N-Queens puzzle. reference: t ...

  6. 在MyEclipse显示struts2源码和doc文档及自动完成功能

    分类: struts2 2010-01-07 16:34 1498人阅读 评论(1) 收藏 举报 myeclipsestruts文档xmlfileurl 在MyEclipse显示struts2源码和d ...

  7. Qt之Qwt学习之安装

    QWT+qtcreator 编译.安装使用 目录:一.Qwt简介 二.QWT编译 一.Qwt简介 QWT:Qt Widgets for Technical Applications,是开源的2D绘图库 ...

  8. apache 反向代理配置

    配置前资料检查: 1.可以使用的apache 安装apache服务:打开cmd , 在apache的bin目录下执行以下命令 httpd -k install -n apache2.2    其中&q ...

  9. CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...

  10. 自定义iOS7导航栏背景,标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...