文章目录
- 解析 JSON 数据
- 将数据转换为JSON字符串
- 读取JSON文件
- 利用XMLHttpRequest对象读取Json文件
- 利用jQuery读取Json文件
- 引入json
JSON 中有两种基本的结构:
- 对象:由若干键/值对(即key:value)组成的无序集合,每个对象以左花括号{开始,以右花括号}结尾,多个键/值对之间使用逗号,分隔;
- 数组:一个有序的值列表,每个数组以左方括号[开始,以右方括号]结尾,多个值之间使用逗号,分隔。
在 JSON 中,属性名称或键都是字符串格式的(需要使用英文的双引号括起来),而值则可以是任意类型,如下所示:
{
"course": {
"name": "JavaScript",
"author": "http://c.biancheng.net/",
"year": 2021,
"genre": "Getting Started tutorial",
"bestseller": true
},
"fruits": [
"Apple",
"Banana",
"Strawberry",
"Mango"
]
}
解析 JSON 数据
使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象。
var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}';
var obj = JSON.parse(json); // 使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象:
console.log(obj.course);
console.log(obj.fruits);
结果如下:
{name: 'JavaScript', author: 'http://c.biancheng.net/', year: 2021, genre: 'Getting Started tutorial', bestseller: true}
['Apple', 'Banana', 'Strawberry', 'Mango']
将数据转换为JSON字符串
JSON.stringify()方法 来将 json对象转化为json字符串
var obj = {
"name": "JavaScript",
"author": "http://c.biancheng.net/",
"year": 2021,
"genre": "Getting Started tutorial",
"bestseller": true
};
var json = JSON.stringify(obj);
document.write(json);
结果如下:
{"name":"JavaScript","author":"http://c.biancheng.net/","year":2021,"genre":"Getting Started tutorial","bestseller":true}
JavaScript 对象与 JSON 对象的区别:在 JavaScript 中,对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来,也可以完全省略引号。但是,在 JSON 中,所有属性名称都必须用双引号括起来。
读取JSON文件
利用XMLHttpRequest对象读取Json文件
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
console.log(json);
}
};
xmlhttp.open("GET", "example.json", true);
xmlhttp.send();
利用jQuery读取Json文件
$.getJSON("example.json", function(json) {
console.log(json);
});
引入json
在Vue.js中首选将json文件引入
import data from '../assets/data.json'
``