JSON(格式、取值、格式转换)


1、JSON(JavaScript Object Notation)概述

(1)概念

JSON是一种轻量级的数据交换格式,功能上类似于XML,但是JSON的数据更新更容易解析,更小、速度更快。

JSON是一种完全独立于编程语言的文本格式(占用空间小,利于传输),因此JSON可以运用于不同的语言中。

采用完全独立于编程语言的文本格式来存储和表示数据

易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率

数据格式:对象和字符串

(2)前后端分离

后端独立部署,提供接口,提供数据

前端独立部署,负责渲染后端的数据

 

2、JSON对象

        {
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
        }

(1)一共为product对象创建了四个变量,并为变量进行了赋值。

(2)在创建对象时,数值名称必须用双引号,数值是Object类型。

 

3、JSON数组(多个对象)

        [{
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
        },
        {
            "pname":"薯脆",
            "price":2.3,
            "paddress":"河南省郑州市",
            "ptime":"2020-2-10"
        },
        {
            "pname":"可口可乐",
            "price":4.00,
            "paddress":"河南省郑州市",
            "ptime":"2020-1-23"
        }
        ]

(1)该数组中包括了三个元素,每个元素代表一个商品的信息,

(2)花括号中的内容是一个对象,方括号中的内容是一个数组。

(3)值的本身也是一个对象:

supermarket={
            "productes":[
            {
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
            },
            {
                "pname":"薯脆",
                "price":2.3,
                "paddress":"河南省郑州市",
                "ptime":"2020-2-10"
            },
            {
                "pname":"可口可乐",
                "price":4.00,
                "paddress":"河南省郑州市",
                "ptime":"2020-1-23"
            }
            ],
            "address":"河南省周口市"
            }

一个超市有多个商品信息。

 

4、JSON的取值

(1)从对象中取值:

<script>
            var product={
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
        };
        alert(product.pname);
        </script>

 

 (2)从数组中取值:

<script>
            var products=  [{
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
        },
        {
            "pname":"薯脆",
            "price":2.3,
            "paddress":"河南省郑州市",
            "ptime":"2020-2-10"
        },
        {
            "pname":"可口可乐",
            "price":4.00,
            "paddress":"河南省郑州市",
            "ptime":"2020-1-23"
        }
        ];
        alert(products[1].pname);
        </script>

 

 (3)值为对象的时候的取值方法:

<script>
        var supermarket={
            "productes":[
            {
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
            },
            {
                "pname":"薯脆",
                "price":2.3,
                "paddress":"河南省郑州市",
                "ptime":"2020-2-10"
            },
            {
                "pname":"可口可乐",
                "price":4.00,
                "paddress":"河南省郑州市",
                "ptime":"2020-1-23"
            }
            ],
            "address":"河南省周口市"
            };
           alert(supermarket.productes[1].pname);
        </script>

 

 5、修改值

<script>
        var supermarket={
            "productes":[
            {
            "pname":"小熊饼干",
            "price":12.3,
            "paddress":"河南省漯河市",
            "ptime":"2020-1-10"
            },
            {
                "pname":"薯脆",
                "price":2.3,
                "paddress":"河南省郑州市",
                "ptime":"2020-2-10"
            },
            {
                "pname":"可口可乐",
                "price":4.00,
                "paddress":"河南省郑州市",
                "ptime":"2020-1-23"
            }
            ],
            "address":"河南省周口市"
            };
            supermarket.productes[1].pname="雪碧";
           alert(supermarket.productes[1].pname);
</script>

 

6、json对象对象和json字符串的转换

(1)json对象转换为json字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var user={
                name:"zhai",
                age:12,
                sex:""
            };
            var json=JSON.stringify(user);
            console.log(json);
            console.log(user);
        </script>
    </head>
    <body>
    </body>
</html>

先创建一个js的user对象,然后调用方法将user对象转换为json对象

 第一个是json对象(是字符串格式,不能展开),第二个是js创建的对象可以展开查看所有的属性

(2)json字符串转换为json对象

在网络中传输的json是(服务器向而客户端传输的数据)字符串形式的,将数据返回到前端时,是通过js代码进行处理的,因此需要进行格式的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var user={
                name:"zhai",
                age:12,
                sex:""
            };
            var json=JSON.stringify(user);
            console.log(json);
            var obj=JSON.parse(json);
            console.log(obj);
        </script>
    </head>
    <body>
    </body>
</html>

先调用方法将一个js对象转化为json对象,再调用方法将json对象转化为js对象

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM