我需要使用 Mustache 或 Handlebars 让 HTML 用 JSON 文件中的内容填充自身。
我创建了两个简单的 HTML 模板用于测试(使用 Handlebars)，并用外部 JavaScript 文件中的内容填充它们。 http://codepen.io/MaxVelichkin/pen/qNgxpB
现在我需要将内容最初放置在 JSON 文件中。
我遇到了两个问题，但它们都是同一主要问题解决方案的核心 - 在 JSON 文件和 HTML 中的内容之间创建链接，所以我决定询问他们在同一个问题中。
如何连接 JSON 和 HTML？据我所知，有一种方法是使用AJAX，还有一种方法是使用服务器。 AJAX 对我来说是一门新语言，因此我将不胜感激地解释如何使用我使用 Node 创建的本地 HTTP 服务器来做到这一点.JS.
JSON 文件中的语法应该是什么？ JSON 文件 中的脚本必须与 JavaScript 文件中的脚本相同，但是应该借助
JSON.parse函数对其进行处理，是否正确？或者 JSON 文件 中的语法应该不同？例如，如果我们考虑我的示例(上面的链接)，JSON 文件中第一个模板的代码必须与 JavaScript 文件中的相同，但在最后一行
document.getElementById('quoteData').innerHTML += quoteData;，我必须编写以下行var contentJS = JSON.parse(quoteData);，然后更改名称最后一行中的变量，因此它将是:document.getElementById('quoteData').innerHTML += contentJS;，是吗？
最佳答案
试试这个:
HTML:
<!-- template-1 -->
<div id="testData"></div>
<script id="date-template" type="text/x-handlebars-template">
Date:<span> <b>{{date}}</b> </span> <br/> Time: <span><b>{{time}}</b></span>
</script>
JS:
function sendGet(callback) {
/* create an AJAX request using XMLHttpRequest*/
var xhr = new XMLHttpRequest();
/*reference json url taken from: http://www.jsontest.com/*/
/* Specify the type of request by using XMLHttpRequest "open",
here 'GET'(argument one) refers to request type
"http://date.jsontest.com/" (argument two) refers to JSON file location*/
xhr.open('GET', "http://date.jsontest.com/");
/*Using onload event handler you can check status of your request*/
xhr.onload = function () {
if (xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
} else {
alert(xhr.statusText);
}
};
/*Using onerror event handler you can check error state, if your request failed to get the data*/
xhr.onerror = function () {
alert("Network Error");
};
/*send the request to server*/
xhr.send();
}
//For template-1
var dateTemplate = document.getElementById("date-template").innerHTML;
var template = Handlebars.compile(dateTemplate);
sendGet(function (response) {
document.getElementById('testData').innerHTML += template(response);
})
JSON:
JSON 数据格式源自 JavaScript，因此它更像 JavaScript 对象，Douglas Crockford 最初指定了 JSON 格式，请查看 here 。
JavaScript 对象表示法有一套规则。
以左大括号 ( { ) 开头，以右大括号 ( } ) 结束 例如:{}
在 baces 中，您可以添加“键”及其“值”，例如 { "title": "hello json"} 这里“title”是键，“hello json”是该键的值。
“key”应该是字符串
无法在 JSON 中添加 JavaScript 注释(例如//或/**/)
有很多在线 JSON 验证器，你可以检查你的 JSON 是否有效，检查 here 。
<小时/>当谈到将 JSON 链接到 js 文件时，它更像是提供一个接口(interface)来获取 JSON 数据并在 JavaScript 中使用它。
这里是我们的XMLHttpRequest接口(interface)。我们通常调用XMLHttpRequest API。
在给定的 js 代码中，使用 REST API ( http://date.jsontest.com/ ) 从服务器获取 JSON
有关 REST API 的更多信息，您可以查看 here
从 url: http://date.jsontest.com/ 你可以得到像下面这样的 JSON 对象。
{
"time": "03:47:36 PM",
"milliseconds_since_epoch": 1471794456318,
"date": "08-21-2016"
}
Note: data is dynamic; values change on each request.
因此，通过使用外部 API，您可以获得 JSON，要在 JavaScript 文件/代码库中使用它，您需要将 JSON 转换为 JavaScript 对象，
JSON.parse(/* 您的 JSON 对象在这里*/) 将 JSON 转换为 js 对象
`var responseObject = JSON.parse(xhr.responseText)`
通过使用点(.) 或方括号([]) 表示法，您可以访问JavaScript 对象属性或键；像下面这样。
console.log(responseObject.time) //"03:47:36 PM"
console.log(responseObject["time"]) //"03:47:36 PM"
console.log(responseObject.milliseconds_since_epoch) //1471794456318
console.log(responseObject["milliseconds_since_epoch"])//1471794456318
console.log(responseObject.date) //"08-21-2016"
console.log(responseObject["date"]) //"08-21-2016"
因此，要链接本地 JSON 文件(来自本地目录)或 JavaScript 文件中的外部 API，您可以使用“XMLHttpRequest”。
上面的 js block 中更新了“sendGet”函数，并附有注释，请检查。
简单来说:
- 创建 XMLHttpRequest 实例
例如:var xhr = new XMLHttpRequest(); - 开放请求类型
例如:xhr.open('GET', "http://date.jsontest.com/"); - 向服务器发送“GET”请求
例如:xhr.send(); - 如果响应的状态代码为 200，则注册加载事件处理程序以保存 JSON 对象。
例如:xhr.onload = function () {
有关更多信息，请检查 here
<小时/>了解这些:
- 对象字面量表示法
- 原始数据类型和非原始数据类型之间的差异
现有参考文献:
关于javascript - 如何使用 Handlebars 让 HTML 使用 JSON 文件中的内容填充自身？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38947646/