Ajax和JSON-学习笔记03【JSON_基础语法】

ゝ一世哀愁。 2022-10-30 13:27 31阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Ajax和JSON-学习笔记01【原生JS方式实现Ajax】][Ajax_JSON-_01_JS_Ajax]
> 2.  [Ajax和JSON-学习笔记02【JQuery方式实现Ajax】][Ajax_JSON-_02_JQuery_Ajax]
> 3.  [Ajax和JSON-学习笔记03【JSON\_基础语法】][Ajax_JSON-_03_JSON]
> 4.  [Ajax和JSON-学习笔记04【JSON\_解析器】][Ajax_JSON-_04_JSON]

**目录**

第3节 JSON\_基础语法

JSON\_概念

JSON\_语法\_定义

JSON\_语法\_值的获取与遍历

JSON值的获取

JSON值的遍历

--------------------

# 第3节 JSON\_基础语法 #

## JSON\_概念 ##

> **JSON**  
> 1. 概念：JavaScript Object Notation，JavaScript对象表示法  
>     Person p = new Person();  
>     p.setName("张三");  
>     p.setAge(23);  
>     p.setGender("男");
> 
>     var p = \{"name":"张三","age":23,"gender":"男"\};
> 
>     \* json现在多用于存储和交换文本信息；  
>     \* 进行数据的传输；  
>     \* JSON 比 XML 更小、更快，更易解析。

> ![20210219192532718.png][]

## JSON\_语法\_定义 ##

> JSON  
> 1. 概念：JavaScript Object Notation，JavaScript对象表示法  
> 2. 语法：  
>     1. 基本规则  
>         \* 数据在名称/值对中：json数据是由键值对构成的  
>             \* 键用引号(单双都行)引起来，也可以不使用引号  
>             \* 值的取值类型：  
>                 1. 数字（整数或浮点数）  
>                 2. 字符串（在双引号中）  
>                 3. 逻辑值（true 或 false）  
>                 4. 数组（在方括号中） \{"persons":\[\{\},\{\}\]\}  
>                 5. 对象（在花括号中） \{"address":\{"province":"陕西"...\}\}  
>                 6. null  
>         \* 数据由逗号分隔：多个键值对由逗号分隔  
>         \* 花括号保存对象：使用\{\}定义json格式  
>         \* 方括号保存数组：\[\]  
>     2. 获取数据

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //1.定义基本格式
            var person = {"name": "张三", age: 23, 'gender': true};
            alert(person); // [object Object]
    
            //2.嵌套格式   {}———> []
            var persons = {
                "persons": [
                    {"name": "张三", "age": 23, "gender": true},
                    {"name": "李四", "age": 24, "gender": true},
                    {"name": "王五", "age": 25, "gender": false}
                ]
            };
            alert(persons); // [object Object]
    
            //2.嵌套格式   []———> {}
            var ps = [{"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}];
            alert(ps); // [object Object],[object Object],[object Object]
        </script>
    </head>
    <body>
    </body>
    </html>

## JSON\_语法\_值的获取与遍历 ##

> **JSON**  
> 1. 概念：JavaScript Object Notation，JavaScript对象表示法  
> 2. 语法：  
>     1. 基本规则  
>         \* 数据在名称/值对中：json数据是由键值对构成的  
>             \* 键用引号(单双都行)引起来，也可以不使用引号  
>             \* 值的取值类型：  
>                 1. 数字（整数或浮点数）  
>                 2. 字符串（在双引号中）  
>                 3. 逻辑值（true 或 false）  
>                 4. 数组（在方括号中） \{"persons":\[\{\},\{\}\]\}  
>                 5. 对象（在花括号中） \{"address":\{"province":"陕西"...\}\}  
>                 6. null  
>         \* 数据由逗号分隔：多个键值对由逗号分隔  
>         \* 花括号保存对象：使用\{\}定义json格式  
>         \* 方括号保存数组：\[\]  
>     2. 获取数据:  
>         1. json对象.键名  
>         2. json对象\["键名"\]  
>         3. 数组对象\[索引\]  
>         4. 遍历

### JSON值的获取 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //1.定义基本格式
            var person = {"name": "张三", age: 23, 'gender': true};
            //获取name的值
            //var name = person.name; // 写法1
            var name = person["name"]; // 写法2
            alert(name); // 张三
    
            //2.嵌套格式   {}———> []
            var persons = {
                "persons": [
                    {"name": "张三", "age": 23, "gender": true},
                    {"name": "李四", "age": 24, "gender": true},
                    {"name": "王五", "age": 25, "gender": false}
                ]
            };
            //获取王五值
            var name1 = persons.persons[2].name;
            alert(name1); // 王五
    
            //2.嵌套格式   []———> {}
            var ps = [{"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}];
            //获取李四值
            alert(ps[1].name); // 李四
        </script>
    </head>
    <body>
    </body>
    </html>

### JSON值的遍历 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Ajax_JSON-_01_JS_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113863644
[Ajax_JSON-_02_JQuery_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113869026
[Ajax_JSON-_03_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870353
[Ajax_JSON-_04_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870817
[20210219192532718.png]: /images/20221024/46954ef0a3ca49c4ac17d09c85e492f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/f52c2297ead34928a89170116fbe7844.png