zoukankan      html  css  js  c++  java
  • 无后台的网站 内容暂存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>

     

     

     

     

  • 相关阅读:
    JS学习专辑(3) DOM
    JS学习专辑(4) 变量作用域和语句
    JS学习专辑(6) 函数
    JS学习专辑(2) BOM
    WPF Adorner学习(1)
    C# 递归
    IEnumerable和IEnumerator
    C# 索引器
    JS学习专辑(5) 对象和数组
    JS学习专辑(1) 入门
  • 原文地址:https://www.cnblogs.com/lynnekanuo/p/6118150.html
Copyright © 2011-2022 走看看