JSON详解-使用示例
JSON
- 概述：JSON全程 JavaScript Object Notation，是一种轻量级的数据交换格式、是一种纯文本。JSON相对于XML来说读写的速度更快。
- 作用：
- JSON 是用于存储和传输数据的格式
- JSON 通常用于服务端向网页传递数据
- 语法规则
- 数据为 键/值 对，一个名称对应一个值，中间用 “:”
- 数据由逗号分隔
- 大括号保存对象，对象可以保存多个 键/值 对
- 方括号保存数组
- JSON值
- 数字（整数或浮点数）
- 字符串（双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）,数组中可包含多个对象
- 对象（在大括号中）
- null
- JSON 文件
- JSON 文件的文件类型是 .json
- JSON 文本的 MIME 类型是 application/json
JSON 举例
{"student":[
{"name":"张三","address":"河南","age":20},
{"name":"李四","address":"北京","age":25},
{"name":"王五","address":"上海","age":30}
]}
student 是一个对象，里边有三条对象的信息
“name”:“张三” 等同于 JavaScript的 name=“张三”
// javascript 语法，等同于上述 json 案例
var student = [
{"name":"张三","address":"河南","age":20},
{"name":"李四","address":"北京","age":25},
{"name":"王五","address":"上海","age":30}
];
// 找到张三
student[0].name;
JSON 和 XML 对比
- 概述：JSON 和 XML 都用于接收 web 服务端的数据
- XML 实例，和上述 JSON 实例等同
<student>
<s>
<name>张三name> <address>河南address> <age>20age>
s>
<s>
<name>李四name> <address>北京address> <age>25age>
s>
<s>
<name>王五name> <address>上海address> <age>30age>
s>
student>
- 不同之处
- JSON 不需要结束标签
- JSON 更加简短
- JSON 读写速度更快
- JSON 可以使用数组
- XML 需要使用 XML 解析器来解析，JSON 使用标准的 JavaScript 函数来解析。
JSON 对象
访问对象
-
方式一：使用 “.”
var student,username; student = {"name":"张三","address":"河南","age":30}; username = student.name; -
方式二：使用 “[]”
var student,username; student = {"name":"张三","address":"河南","age":30}; username = student["name"];
循环对象
- “for-in”来循环对象的属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
var student = {"name":"张三","address":"河南","age":30};
for(x in student){
document.getElementById("demo").innerHTML += x + "--" + student[x] + "
";
}
script>
body>
html>
嵌套 JSON 对象
-
实例
student{ "name":"张三", "address":"河南", "technologys":{ "t1":"Java", "t2":"Python", "t3":"Go" } } -
访问
x = student.technologys.t1; // 或 x = student.technologys["t1"];
删除对象属性
-
使用 delete 关键字来删除 JSON 对象的属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p id="demo">p> <script> var student = { "name":"张三", "address":"河南", "technologys":{ "t1":"Java", "t2":"Python", "t3":"Go" } } delete student.technologys.t3; for(x in student.technologys){ document.getElementById("demo").innerHTML += x + "--" + student.technologys[x] + "
"; } script> body> html>
JSON 和 JavaScript 互相转换
- JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象
- JSON.stringify()：将 JavaScript 值转换为 JSON 字符串
JSON.parse()
-
JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串
-
语法
JSON.parse(text[,reviver])text：必需，一个有效的 JSON 字符串
reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数
-
示例代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p id="demo">p> <script> var obj = JSON.parse('{"student":[\n' + ' {"name":"张三","address":"河南","age":20},\n' + ' {"name":"李四","address":"北京","age":25},\n' + ' {"name":"王五","address":"上海","age":30}\n' + ']}'); document.getElementById("demo").innerHTML = obj.student[0].name + ":" + obj.student[0].address; script> body> html>
日期异常
- 概述：JSON 不能存储 Date 对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
var text = '{"name":"张三","age":30,"address":"北京","createDate":"2024-01-01"}';
var obj = JSON.parse(text,function (key, value){
if(key == "createDate"){
return new Date(value);
} else{
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.createDate;
script>
body>
html>
解析函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
var text = '{"name":"清华大学","rank":"function(){return 1}","address":"北京"}';
var obj = JSON.parse(text);
// 字符串转函数
obj.rank = eval("("+ obj.rank +")");
document.getElementById("demo").innerHTML = obj.name + "学校排名：" + obj.rank();
script>
body>
html>
注意：将 函数作为字符串存储，然后再将字符串转换为函数
JSON.stringify()
-
JSON 通常用于与服务端交换数据，在发送服务器数据时一般是字符串
-
语法
JSON.stringifg(value[,replacer[,space]]);value：必需，要转换的 JavaScript 值（通常为对象或数组）
replacer：可选，用于转换结果的函数或数组
space：可选，文本添加缩进、空格和换行符，space是数字，指定数目的空格
-
示例代码，对象转换
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p id="demo">p> <script> var obj = {"name":"张三","address":"河南","age":30}; var s = JSON.stringify(obj); document.getElementById("demo").innerHTML = s; script> body> html> -
示例代码，数组转换
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p id="demo">p> <script> var arr = [ {"name":"张三","address":"河南","age":30}, {"name":"李四","address":"湖北","age":35} ]; var s = JSON.stringify(arr); document.getElementById("demo").innerHTML = s; script> body> html>
日期异常
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
// 创建一个对象
var obj = {"name":"小哼","createDate":new Date(),"age":25};
// 对象转字符串
var s = JSON.stringify(obj);
document.getElementById("demo").innerHTML = s;
script>
body>
html>
注意：将对象转换成了字符串，可以利用parse再转成对象
解析函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
var obj = {"name":"小哼","age":function (){return 25}};
// 函数转换字符串
obj.age = obj.age.toString();
var s = JSON.stringify(obj);
document.getElementById("demo").innerHTML = s;
script>
body>
html>
注意：函数转换字符串-使用 toString() 方法
JSON解析器
-
概述：eval() 函数可将 JSON 文本转换成 JavaScript 对象
-
语法
var obj = eval("(" + text + ")"); -
示例代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p id="demo">p> <script> // JSON 文本 var text = '{"student":[\n' + ' {"name":"张三","address":"河南","age":20},\n' + ' {"name":"李四","address":"北京","age":25},\n' + ' {"name":"王五","address":"上海","age":30}\n' + ']}'; // 调用 eval 函数，将 JSON 字符串转换成 JavaScript 对象 var obj = eval("("+ text +")"); document.getElementById("demo").innerHTML += obj.student[0].name; document.getElementById("demo").innerHTML += obj.student[1].address; script> body> html>