在使用json之前我们应该先了解一下什么是json?
json全称JavaScript Object Notation,即js对象简谱, 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。。
JSON可以作为一个对象或者字符串存在,前者用于解读 JSON 中的数据,后者用于通过网络传输 JSON 数据。 这不是一个大事件——JavaScript 提供一个全局的 可访问的 JSON 对象来对这两种数据进行转换。
这一点也让人注意到json并不仅限于js环境。
为了加载对象进入js程序,这个对象应包括属性名和数组索引,
先看mdn上的一个对于访问json对象的ex;
superHeroes["members"][1]["powers"][2]
- 首先我们有变量名
superHeroes
,储存对象 。 - 在对象中我们想访问
members
属性,所以我们使用["members"]
。 members
包含有对象数组,我们想要访问第二个元素,所以我们使用[1]
。- 在对象内,我们想访问
powers
属性,所以我们使用["powers"]
。 powers
属性是一个包含英雄技能的数组。我们想要第三个,所以我们使用[2]
。
注意:
- JSON 是一种纯数据格式,它只包含属性,没有方法。
- JSON 要求有两头的 { } 来使其合法。最安全的写法是有两边的括号,而不是一边。
- 甚至一个错位的逗号或分号就可以导致 JSON 文件出错。您应该小心的检查您想使用的数据(虽然计算机生成的 JSON 很少出错,只要生成程序正常工作)。您可以通过像 JSONLint 的应用程序来检验 JSON。
- JSON 可以将任何标准合法的 JSON 数据格式化保存,不只是数组和对象。比如,一个单一的字符串或者数字可以是合法的 JSON 对象。虽然不是特别有用处……
- 不像 JavaScript 标识符可以用作属性,在 JSON 中,只有字符串才能用作属性。
做一个自己网页的json demo:
1.首先在html中添加一个标签
<div class="qianjing_say" id="say">
</div>
用于之后添加数据。
2.此时你应该想好这个标签里应该添加什么数据,把数据写入json中,我这儿就把写好的json对象写好,为方便之后的远程请求
就把它上传到github托管上,带服务器的也可以放在服务器上面。https://ceneasy.github.io/test/test.json
将文件传上github的教程,我之后我会写一篇博客详细解说。
{ "squadName" : "2018年加密货币展望:将再疯狂一年", "homeTown" : "各种空气币横出,币市动荡,政府严加查管代币非法集资,加密货币的未来何去何从?", "third": "试试你能认出下面哪些虚拟币(滑稽.jpg)" }
2.js程序
var header = document.getElementById("say");
定义一个变量获取id名为"say"的标签
加载json
这里使用这个名为XMLHTTPRequest的api用于远程请求
定义一个变量为即将访问的url
var requestURL = 'https://ceneasy.github.io/test/test.json';
再定义一个http请求对象
var request = new XMLHttpRequest();
现在我们需要使用 open()
函数打开一个新的请求
request.open('GET', requestURL);
这个函数至少含有两个参数,其它的是可选参数。对于示例我们只需要两个强制参数
- HTTP 方法,网络连接时使用。这个示例中
GET
就可以了,因为我们只要获得简单的数据。 - URL,用于指向请求的地址。我们使用之前保存的变量。
接下来,添加,两行代码,我们设定 responseType
为 JSON,所以服务器将知道我们想要返回一个 JSON 对象,然后发送请求 :
request.responseType = 'json'; request.send();
最后一点内容涉及相应来自服务器的返回数据,然后处理它,添加如下代码在您先前的代码下方:
request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); //调用填充数据的方法 }
接下来就是填充数据
function populateHeader(jsonObj) {
var myH1 = document.createElement('h2'); //定义创建标签的变量
myH1.setAttribute("class","as")
myH1.textContent = jsonObj['squadName']; //填充内容进新标签中
header.appendChild(myH1); //将新标签填入老标签中
var myH2 = document.createElement('p');
myH2.setAttribute("class","as")
myH2.textContent = jsonObj['homeTown'];
header.appendChild(myH2);
var myH3 = document.createElement('p');
myH3.setAttribute("class","as")
myH3.textContent = jsonObj['third'];
header.appendChild(myH3);
}
这也就是我们json渲染出来的效果,另外注意一点,你可以用css定义数据标签的样式。