JSON数据传输与交互原理解析(小白专用)

最新推荐文章于 2024-04-29 12:15:45 发布

唯我独仙-三界至尊

最新推荐文章于 2024-04-29 12:15:45 发布

阅读量138

点赞数

文章标签： json 交互

本文链接：https://blog.csdn.net/m0_60995778/article/details/132766755

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. JSON
            功能：数据交换
            1.1 json格式是什么格式？
                两个符号： {}  []
                注意：json数据的类型是String,key值必须要添加双引号
            1.2 js对象和json数据之间的转化
                JSON.stringify  ..将一个JavaScript对象或值转换为一个JSON字符串，
                    可以用于将JavaScript对象序列化为字符串以便在网络上进行传输或存储。
                JSON.parse---.parse是JavaScript中的一个方法，用于将一个JSON字符串转换为JavaScript对象。
     -->
     <script>
        //a.  js对象如何装成json数据
        var person01={
            id:101,
            name:'张杰',
            age:28,
            salary:2000,
            phone:{
                id:1,
                brand:'鸭梨',
                price:499
            },
            cars:["奥迪","五菱","大众"],
            carPlus:[{id:1,name:'rs7',price:300},{id:2,name:'mini',price:3},{id:3,name:'捷达',price:5}]
        }

        var json01=JSON.stringify(person01);  //js对象转换成json字符串,方便网络传输
        console.log(json01);
        console.log(typeof json01);

        //b. json数据转为js对象
        var json02='{"id":1021,"name":"谢娜","age":28,"salary":5000,"phone":{"id":1,"brand":"鸭梨","price":499},"cars":["奥迪","五菱","大众"],"carPlus":[{"id":1,"name":"rs7","price":300},{"id":2,"name":"mini","price":3},{"id":3,"name":"捷达","price":5}]}'
       var person02=JSON.parse(json02); //给他由JSON转换成JS对象
       console.log(person02);
       console.log(typeof person02);

       //如何从js对象中取值
       console.log(person02.id);
       console.log(person02.name);
       console.log(person02.age);
       console.log(person02.salary);
       console.log(person02.phone.id);
       console.log(person02.phone.brand);
       console.log(person02.phone.price);
       for (var i in person02.cars) {
            console.log(person02.cars[i]);
       }

       for (var j in person02.carPlus) {
            console.log(person02.carPlus[j].id);
            console.log(person02.carPlus[j].name);
            console.log(person02.carPlus[j].price);
       }


     </script>
</head>
<body>
    
</body>
</html>