初识JSON

学习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>

参考

使用 JSON – 学习 Web 开发 | MDN

JSON 简介 | JavaScript 教程

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇