Question

我即将做一个静态网站，其中包含有关如何进行不同类型绷带的信息。我决定使用Bootstrap + Boilerplate组合（由initializr服务），现在我遇到了以下问题：

对于每种绷带类型（大约30种）我会有它的名字，简短说明，绷带类型，视频链接以及长篇说明（可能是HTML格式的标题）
因为网站必须能够在线运行并且也可以从例如离线运行USB磁盘，不可能使用PHP，Python等甚至数据库。
我不想为每种绷带类型创建相同的网站（对于mantain和大量重复的代码来说都很繁琐），所以我决定将这些信息保存为JSON文件中的条目（想一想）作为一个数据库），然后我想从这个JSON文件“动态”创建绷带页面。

示例：我的页面上有链接：

<a href="http://www.bdtypes.com/bandages/head_crit.html">Head critical bandage</a>

现在我想打开一些带有信息（标题，字幕，内容，视频链接......）的模板页面，这些信息是使用密钥“head_crit”从JSON文件加载的。

这甚至可能吗？还是有更好的方法吗？我知道jQuery能够加载JSON文件，但我不熟悉它的可能性，即使这个解决方案是好的还是愚蠢的......

谢谢

Answer 1

我想说对于你想做的事情来说这是一个很好的选择。

您可以使用jQuery轻松加载json文件：link。您也可以直接在javascript中创建它，但它不是很常规。

您可以做的是在第一次启动时加载包含所有信息的json文件，然后将其存储到会话中，例如。

var yourJson = {
    headCrit: {
        name: "blabla"
        link: "blabla"
    },
    headOther: {...}
};

（当你在会话中存储JSON时，你将不得不使用JSON.parse（）和JSON.stringify）

然后您可以使用以下内容更改数据：

function changeHeader (header){
     $("#ElementForName").text( yourJson[header].name );
     ....
}

加载json文件是异步的，因此根据数据的大小需要花费时间，您可能需要在加载数据的同时创建加载效果