JSON是什么，JavaScript JSON的用法（附带实例）

JSON 是一种轻量级的数据交换格式。它采用完全独立于编程语言的文本格式来存储和表示数据，能够轻松地在服务器和浏览器之间传输数据，目前已成为各大网站交换数据的标准格式。

JSON 主要具有以下特性，这些特性使它成为理想的数据交换格式：

JSON 是轻量级的文本数据交换格式；
JSON 具有自我描述性，更易理解；
JSON 采用完全独立于语言的文本格式。

JSON数据格式

JSON 数据的语法格式如下：

{
    "名称1": 值1,
    "名称2": 值2,
    ...
    "名称n": 值n
}

JSON 使用一对花括号将键值对括起来，键名必须用双引号引起来，每个键值对之间用逗号分隔，最后一个键值对的后面不需要逗号。

值必须是以下数据类型之一：

1) 值可以是一个字符串，必须用双引号包围，示例如下：

{"fullname": "东城区"}

2) 值可以是一个数字，必须是整数或浮点数，示例如下：

{ "age":30 }

3) 值可以是一个 JSON 对象，示例如下：

{
    "location": {
        "lat": 28.523919,  //纬度
        "lng": 100.23114  //经度
    }
}

4) 值可以是一个数组，示例如下：

{
    "pinyin": [ "dong", "cheng" ]
}

5) 值可以是一个布尔值。示例如下：

{ "sale":true }

6) 值可以是 null。示例如下：

{ " fullname ":null }

常见的行政区划 JSON 数据格式示例如下：

{
    "id": "110000",  // 行政区划唯一标识，值为字符串类型
    "name": "北京",  // 简称，值为字符串类型
    "fullname": "北京市",  // 全称，值为字符串类型
    "pinyin": ["bei", "jing"],  // 行政区划拼音，值为数组类型
    "location": {
        "lat": 39.90469,  // 纬度，值为数字类型
        "lng": 16.40717  // 经度，值为数字类型
    },
    "cidx": [0, 15] // 子级行政区划在下级数组中的下标位置，值为数组类型
}

JavaScript JSON方法

JSON 本质是一个字符串，前端获取到 JSON 数据后，需要将 JSON 数据解析为 JavaScript 对象，然后通过该对象引用键名来获取对应的属性值。

JSON 包含以下两个方法实现与 JavaScript 对象的相互转换：
1) JSON.parse 方法将 JSON 数据格式的字符串转换为 JavaScript 对象，示例如下：

var data = '{"name": "北京"}';
// 声明一个 JSON 数据格式的字符串
var obj = JSON.parse(data);
// 将 JSON 解析为 JavaScript 对象
console.log(obj);
// 输出 {"name": "北京"}
console.log(obj.name);
// 输出对象的 name 属性值：北京

2) JSON.stringify 方法将 JavaScript 对象转换为字符串，示例如下：

var obj = {"name": "北京"};
// 声明一个 JavaScript 对象
var data = JSON.stringify(obj);
// 将 JavaScript 对象转换为字符串
console.log(data);
// 输出 {"name": "北京"}
console.log(typeof data);
// 输出 string

下面的实例使用 JSON.parse 方法将获取的 JSON 数据转换为 JavaScript 对象，然后通过该对象引用键名来获取对应的值，并显示在页面中。

<script>
var img = document.getElementById('test'); // 获取页面中的图片标签
var xhr = new XMLHttpRequest();
xhr.open("GET", "服务器地址", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 将获取的 JSON 数据解析成 JavaScript 对象
        var resData = JSON.parse(xhr.responseText);
        img.src = resData[0].url;
    }
}
xhr.send(); // 向服务器发送请求
</script>

程序中：

第 8 行代码将获取的 JSON 数据解析成 JavaScript 对象 resData；
第 9 行代码通过对象 resData 的属性获取图片地址数据，并显示在页面中。

程序在 Chrome 浏览器中的输出效果如下图所示：

图 1 数据展示

JSON是什么，JavaScript JSON的用法（附带实例）

JSON数据格式

JavaScript JSON方法

相关文章