如何使用把手让 HTML 用 JSON 文件中的内容填充自身？

Question

我需要使用 Mustache 或 Handlebars 使 HTML 用来自 JSON 文件的内容填充自身。

我创建了两个用于测试的简单 HTML 模板（使用 Handlebars），并用来自外部 JavaScript 文件的内容填充它们。 http://codepen.io/MaxVelichkin/pen/qNgxpB

现在我需要将内容最初放在 JSON 文件中。

我遇到了两个问题，但它们都处于同一主要问题的解决方案的核心 -在 JSON 文件中的内容和 HTML 之间创建链接，所以我决定在同一问题中问他们。

1. 如何连接JSON和HTML ？ 据我所知，有一种方法是使用AJAX ，还有一种方法是使用server 。 AJAX对我来说是一门新语言，所以如果我能解释如何使用本地 HTTP 服务器（我使用Node.JS创建），我将不胜感激。

2. JSON 文件中的语法应该是什么？ JSON 文件中的脚本必须与 JavaScript 文件中的脚本相同，但是应该借助JSON.parse函数进行处理，对吗？ 或者JSON 文件中的语法应该不同？

   例如，如果我们考虑我的示例（上面的链接）， JSON 文件中第一个模板的代码必须与 JavaScript 文件中的相同，但在最后一行document.getElementById('quoteData').innerHTML += quoteData; ，我必须写以下行var contentJS = JSON.parse(quoteData); ，然后将最后一行的变量名改成： document.getElementById('quoteData').innerHTML += contentJS; ，是吗？

Answer 1

试试这个：

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 格式，请查看此处。

JavaScript Object Notation 有一套规则。

1. 以左花括号 ( { ) 开头，以花括号 ( } ) 结尾，例如：{}

2. 在 baces 中，您可以添加“key”及其“value”，例如 { "title" : "hello json"} 此处“title”是键，“hello json”是该键的值。

3. “key”应该是字符串

4. “价值”可以是：
   号码
   字符串
   布尔值
   数组
   对象
   

5. 不能在 JSON 中添加 JavaScript 注释（如 // 或 /**/）

有很多在线 JSON 验证器，您可以检查您的 JSON 是否有效，请查看这里。

---

在将 JSON 链接到 js 文件时，它更像是提供一个接口来获取 JSON 数据并在您的 JavaScript 中使用它。

这里 XMLHttpRequest 我们的接口。 我们通常调用 XMLHttpRequest API。

在给定的 js 代码中，使用 REST API ( http://date.jsontest.com/ ) 从服务器获取 JSON

有关 REST API 的更多信息，您可以在此处查看

从 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"

因此，要在 JavaScript 文件中链接本地 JSON 文件（来自本地目录）或外部 API，您可以使用“XMLHttpRequest”。

'sendGet' 函数在上面的 js 块中更新，请查看注释。

以简单的方式：

1. 创建 XMLHttpRequest 实例
   ex: var xhr = new XMLHttpRequest();
   
2. 打开请求类型
   ex: xhr.open('GET', "http://date.jsontest.com/");
   
3. 向服务器发送“GET”请求
   ex: xhr.send();
   
4. 如果响应具有状态代码 200，则注册加载事件处理程序以保存 JSON 对象。 ex: xhr.onload = function () {

欲了解更多信息，请点击此处

---

了解这些：

• 对象字面量表示法
• 原始数据类型和非原始数据类型的区别

现有参考资料：

• 什么是 JSON，我为什么要使用它？
• JSON 和 JavaScript 对象有什么区别？

Answer 2

基本上，JSON 是最近使用的一种结构化格式，由于开发人员的一些优势，例如更简单和更容易的结构等，它是首选的结构化格式。Ajax 不是一种语言，它是一种技术，您可以简单地向 API 服务发送请求并进行更新无需重新加载整个页面即可部分查看您的视图。

所以你需要做一个服务器-客户端架构。 在这种情况下，您的所有服务器端响应都将以 JSON 格式作为 RESTful API 发送。 此外，您可以简单地使用 JSON 响应而无需任何转换或其他类似 JavaScript 中的数组对象的东西。

您可以在此处查看一些示例以更好地了解： JSON 示例