当网站无后台时,将数据暂存储为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. ittun配置和使用教程

    有好久没写博了.时间过得真快,一下子一年又过去了. 不墨迹这么多了. 作为一个前端,页面写好了少不了做测试以及给其他同事看看效果,然而公司没有测试服务器,真是悲催哦. 一直都是用ip地址看页面的.但是 ...

  2. javap反编译解释外部类直接使用内部类private字段的原理

    2016-07-04 15:56:39 我们都知道: 1.内部类可以直接访问外部类的private字段和方法: 2.非静态内部类持有外部类的引用: 3.外部类可以直接访问内部类的private字段和方 ...

  3. iOS UISearchBar 设置取消按钮,回收键盘,并修改cancel为“取消”

    继承协议: UISearchBarDelegate 在代理方法中设置: #pragma mark --- 搜索框开始编辑 --- - (void)searchBarTextDidBeginEditin ...

  4. c调用python

    #include <Python.h>//python33(python2.x有几个函数不对应) /* PyImport_ImportModule 导入一个Python模块并返回它的指针 ...

  5. MFC 对话框控件自动布局

    MFC 设计界面程序总是不够智能,没有这样,没有那样. 今天为了加强mfc功能,设计了一个自动布局的类,使用非常简单. 原理: 每个控件都有一个矩形区域,矩形区域就是控件在对话框中的显示位置和大小, ...

  6. less和sass的介绍和差异

    ● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中 ...

  7. js①

    JavaScript的引入方式 直接在script标签内部书写代码 ```html <!DOCTYPE html> ``` 2. 通过script标签的src属性,引入外部的JavaScr ...

  8. 设置DIV块元素在浏览器页面中垂直居中

    任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 ...

  9. Android日志猫的使用

    Android日志猫的使用 Android给我们提供了一个Log类,这个类有一些方法,比如 我们可以在我们的代码中添加这些方法进行测试 package com.example.test; import ...

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

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