json 介绍

JavaScript Object Notation ,是一种轻量级的数据交换格式
具有自我描述性且易于理解
通过 JavaScript 对象标记法书写的文本
功能

交换数据
- 数据在浏览器和服务器之间交换时，只能是文本
- json 数据文本，并且我们可以把任何 JavaScript 对象转换成 json，然后将 json发送到服务器
- 也能从服务器接收到的任何 jason 转换成 JavaScript 对象
发送数据
- JSON.stringify ```javascript <!DOCTYPE html>

把 JavaScript 对象转换为 JSON 字符串，然后发送到服务器。


- 接收数据
   - JSON.parse(myJSON)
```javascript
<!DOCTYPE html>
<html>
<body>
<h1>把 JSON 格式的字符串，转换为 JavaScript 对象：</h1>
<p id="demo"></p>
<script>
var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>

存储数据 ```javascript <!DOCTYPE html>

通过 local storage 存储并取回数据：

<a name="jgTap"></a>
# json 语法
- 是 JavaScript 语法的子集
- 必须用双引号
- <br />
- 语法规则
   - 数据在名称/值对中
   - 数据由逗号分开
   - 花括号容纳对象
   - 方括号容纳数组
- 在 json的键
   - 键必须是字符串，由双引号包围，而 JavaScript 中，键可以是字符串、数字或者标识符名称
- 在 json 中的值，必须是以下数据类型之一
      - 字符串
      - 数字
      - 对象（json 对象）
      - 数组
      - 布尔
      - null
   - 而 JavaScript 中：还可以是
      - 函数
      - 日期
      - undefined
```javascript
<!DOCTYPE html>
<html>
<body>
<h1>使用括号表示法访问 JavaScript 对象：</h1>
<p id="demo"></p>
<script>
var myObj, x;
myObj = { name: "Bill Gates", age: 62, city: "Seattle" };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>

<!DOCTYPE html>
<html>
<body>
<h1>修改 JavaScript 对象：</h1>
<p id="demo"></p>
<script>
var myObj, x;
myObj = { name: "Bill Gates", age: 62, city: "Seattle" };
myObj.name = "Steve Jobs";
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>

JSON与XML

json 实例

{"employees":[
    { "firstName":"Bill", "lastName":"Gates" },
    { "firstName":"Steve", "lastName":"Jobs" },
    { "firstName":"Elon", "lastName":"Musk" }
]}

<employees>
    <employee>
         <firstName>Bill</firstName>
         <lastName>Gates</lastName>
     </employee>
     <employee>
         <firstName>Steve</firstName>
         <lastName>Jobs</lastName>
     </employee>
     <employee>
         <firstName>Elon</firstName>
         <lastName>Musk</lastName>
     </employee>
</employees>

二者相同

都是自描述（即人类可读）的
都是分级的（值中有值）
都能被大量编程语言解析和使用
都能被 XMLHttpRequest 读取

二者不同
json 不使用标签
json 更短
json 读写速度更快
可以使用数组
json 可以通过标准 JavaScript 函数进行解析，而 XML 必须使用XML 解析式进行解析

json 数据类型

1. 字符串

必须双引号包围

2. 数字

必须是整数或者浮点数

3. json 对象

4. 数组

5. 布尔

6. null

不可以

函数
日期
undefined
json 解析
通过 JSON.parse（）解析数据，会将其转换成 JavaScript 对象

<!DOCTYPE html>
<html>
<body>
<h1>用 JSON 字符串创建对象</h1>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>

解析服务器中的 json——JavaScript 对象

<!DOCTYPE html>
<html>
<body>
<h1>使用 XMLHttpRequest 获取文件的内容</h1>
<p>JSON 格式的内容能够轻松转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "/example/json/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/exampl

解析为 JavaScript 数组

<!DOCTYPE html>
<html>
<body>
<h1>数组内容</h1>
<p>以 JSON 数组写的内容会被转换为 JavaScript 数组。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myArr[0];
  }
};
xmlhttp.open("GET", "/demo/json_demo_array.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/example/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

解析日期

<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为 date 对象</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为函数</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "age":"function() {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>
</body>
</html>

JSON字符串化

JSON.stringify()将 JavaScript 对象转换成字符串
在向 web 服务器发送数组时，必须是字符串格式。

JavaScript 对象进行字符串化

<!DOCTYPE html>
<html>
<body>
<h1>从 JavaScript 对象创建 JSON 字符串</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill", age: 62, city: "Seatle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>

JavaScript 数组字符串化

<!DOCTYPE html>
<html>
<body>
<h1>用 JavaScript 数组创建 JSON 字符串</h1>
<p id="demo"></p>
<script>
var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

日期字符串化

直接将日期转化为字符串

<!DOCTYPE html>
<html>
<body>
<h1>JSON.stringify 会把任何日期对象转换为字符串</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill Gates", today: new Date(), city: "Seattle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

函数字符串化

删除对象中的函数

<!DOCTYPE html>
<html>
<body>
<h1>JSON.stringify 会删除对象中的任何函数</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill Gates", age: function () {return 62;}, city: "Seattle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

json 对象(Python 中字典）

格式

JSON 对象被花括号 {} 包围。
JSON 对象以键/值对书写。
键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）。
键和值由冒号分隔。
每个键/值对由逗号分隔。

访问对象

通过点点或者中括号访问对象

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用点号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

通过中括号

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>

遍历对象

遍历的是 key 值

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何遍历 JSON 对象中的所有属性。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
</body>
</html>

用中括号遍历属性值

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问属性值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
  document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>
</body>
</html>

嵌套的 json 对象

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何访问嵌套的 JSON 对象。</p>
<p id="demo"></p>
<script>
var myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": {
  "car1":"Porsche",
  "car2":"BMW",
  "car3":"Volvo"
  }
}
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>
</body>
</html>

修改值

通过点点修改

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": {
  "car1":"Porsche",
  "car2":"BMW",
  "car3":"Volvo"
  }
}
myObj.cars.car2 = "Mercedes Benz";
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

通过中括号修改

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何使用括号表示法修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": {
  "car1":"Porsche",
  "car2":"BMW",
  "car3":"Volvo"
  }
}
myObj.cars["car2"] = "Mercedes Benz";
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

删除对象属性

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何删除 JSON 对象的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": {
  "car1":"Porsche",
  "car2":"BMW",
  "car3":"Volvo"
  }
}
delete myObj.cars.car3;
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

json 数组(类似于 Python 中列表）

格式

可以是：字符串、数字、对象、数组、布尔值、null
不可以：函数、日期、undefined

访问数组值

x = myObj.cars[0]

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>访问 JSON 对象的数组值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars":[ "Porsche", "BMW", "Volvo" ]
};
x = myObj.cars[0];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

遍历数组值

for (i in myObj.cars)

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for in 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

for (i = 0; i < myObj.cars.length; i++)

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i = 0; i < myObj.cars.length; i++) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

数组嵌套数据

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>遍历数组内的数组。</p>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": [
    {"name":"Porsche", "models":["911", "Taycan"]},
    {"name":"BMW", "models":["M5", "M3", "X5"]},
    {"name":"Volvo", "models":["XC90", "V60"] }
  ]
}
for (i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

修改和删除数组值

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>如何修改 JSON 对象的数组值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": ["Porsche","BMW","Volvo"]
}
myObj.cars[2] = "Mercedes Benz";
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

delete myObj.cars[2];

<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>如何删除数组的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
  "name":"Bill Gates",
  "age":62,
  "cars": ["Porsche","BMW","Volvo"]
}
delete myObj.cars[2];
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

JSON