学习json的一丢丢笔记
"JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,但是独立于语言,可以被多种编程语言读取。JSON格式的数据以键值对的形式存储,数据以文本形式表示,类似于编程语言中的结构体或对象"
简单来说就是一种可以被编译程序理解的文本语言。
JSON 语法规则
JSON 语法衍生于 JavaScript 对象标记法语法:
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号容纳对象
- 方括号容纳数组
JSON 数据写为名称/值对。
名称/值由字段名称构成,后跟冒号和值:
"name":"John"
JSON 数据类型
{
"name": "Wint",//字符串
"year": 2024,//数字
"isOK": true,//布尔
"details": {//对象
"car": null,//null值
"age": 1000,
"country": "中国"
},
"cars":[ "Ford", "BMW", "Fiat" ]//数组
"links": [//嵌套数组
{
"name": "Google",
"url": "http://www.google.com"
},
{
"name": "Baidu",
"url": "http://www.baidu.com"
},
{
"name": "Bing",
"url": "http://www.bing.com"
}
]
}
JSON.parse()
解析
JSON 的常规用途是同 web 服务器进行数据传输。
在从 web 服务器接收数据时,数据永远是字符串。
通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象。
<!DOCTYPE html>
<html>
<body>
<h2>从 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
能够通过使用 AJAX 请求从服务器请求 JSON。
只要服务器的响应是用 JSON 格式编写的,可以将字符串解析成 JavaScript 对象。
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", "json_demo.txt", true);
xmlhttp.send();
JSON.stringify()
字符串化
在向 web 服务器发送数据时,数据必须是字符串。
通过 JSON.stringify()
把 JavaScript 对象转换为字符串。
<html>
<body>
<h2>从 JavaScript 对象创建 JSON 字符串。</h2>
<p id="demo"></p>
<script>
var obj = { name: "Wint", age: 30, city: "New York",
arr:[ "John", "Bob", "Carry", "Jane" ] };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
JSON 使用 JavaScript 语法
访问对象
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
//返回John
myObj["name"];
myObj.name;
//返回BMW
x = myObj.cars.car2;
x = myObj.cars["car2"];
遍历对象
for(x in myObj)
<!DOCTYPE html>
<html>
<body>
<p>如何遍历 JSON 对象中的所有属性。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
</body>
</html>