Question

我需要使用小胡子或把手使用JSON文件中的内容填充HTML。

我创建了两个简单的 HTML模板进行测试（使用把手），并使用外部 Javascript文件中的内容填充它们。 http://codepen.io/MaxVelichkin/pen/qNgxpB

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

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

（如果您认为有必要单独提出这些问题，请回答其中一个问题，我会删除第二个问题并单独询问。）

如何连接 JSON 和 HTML ？据我所知，有一种方法，使用 AJAX ，并且有一种使用服务器的方式。 AJAX 对我来说是一种新语言，所以我将使用节点创建的本地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;，是不是？< / LI>

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格式，请检查here。

JavaScript Object Notation有一套规则。

以开放花括号（{）开头，以括号花括号（}）结束例如：{}
在baces内，您可以添加'key'及其'value'，如{“title”：“hello json”} 这里“title”是关键，“hello json”是该键的值。
“key”应为字符串
“价值”可以是：
number
string
Boolean
array
object
无法在JSON中添加JavaScript注释（例如//或/ ** /）

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

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

这里是XMLHttpRequest我们的界面。我们通常调用XMLHttpRequest API。

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

有关REST API的更多信息，您可以查看here

来自网址：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，在您需要将JSON转换为JavaScript对象的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”。

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

以简单的方式：

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

了解详情here

了解这些：

对象文字符号
原始数据类型和非原始数据类型之间的区别

现有参考资料：

Answer 2

基本上，JSON是最近使用的结构化格式，由于开发人员的一些优势而优先使用，比如更简单，更简单的结构等.Ajax不是一种语言，它是一种技术，你可以简单地发送一个请求到API服务并部分更新您的视图而不重新加载整个页面。所以你需要建立一个服务器 - 客户端架构。在这种情况下，所有服务器端响应都将以Json格式发送为RESTFULL Api。此外，您可以简单地使用json响应而无需任何转换或其他类似javascript中的数组对象。你可以在这里看到一些例子来更好地解决： JSON Example

希望这可以帮到你。问候。

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

2 个答案: