初识JSON&JSON的三种形式&JSON的常用方法

初识JSON

　　　　1.JSON是什么

　　　　　　Ajax 发送和接收书数据的一种格式

　　　　　　XML

　　　　　　username=alex&age=18

　　　　　　JSON

　　　　　　　　Json 全称是JavaScript Object Notation

　　　 2.为什么需要JSON

　　　　　　JSON有3中形式，每种形式的写法都和JS中的数据类型很像，可以很轻松的和JS中的数据类型互相转换

　　　　　　　　JS->JSON->PHP/Java

　　　　　　　　PHP/Java->JSON->JS

JSON的三种形式

　　　1.简单值形式

　　　　JSON的简单形式就对应着JS中的基础数据类型

　　　　数字、字符串、布尔值、null

　　　　　　　注意：

　　　　　　　　　　JSON中没有undefined 值
　　　　　　　　　　JSON中的字符串必须使用双引号

　　　　　　　　　　JSON中是不能注释的

　　　　2.　对象形式

　　　　　　　　JSON的对象形式就对应着JS中的对象

　　　　　　　　　　　　注意事项

　　　　　　　　　　　　　　JSON中对象的属性名必须使用双引号，属性值如果是字符串也必须使用双引号

　　　　　　　　　　　　　　 JSON 中只要涉及到字符串，就必须使用双引号

　　　　　　　　　　　　　　不支持undefined

　　　　　3.数组形式

　　　　　　　　JSON的数组形式就对应着JS中的数组

　　　　　注意

　　　　　　　　数组中的字符串必须用双引号

　　　　　　　　JSON只要涉及到字符串，就必须使用双引号

　　　　　　　　不支持undefined　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSON 的 3 种形式</title>
    </head>
    <body>
        <script>
        /*     const xhr =new XMLHttpRequest();
            
            xhr.onreadystatechange = () =>{
                if(xhr.readyState!== 4) return;
                
                if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                    console.log(xhr.responseText);
                    console.log(typeof xhr.responseText)
                }
            };
            xhr.open('GET','./json/plain.json',true);
            xhr.send(null); */
            
        /*     const xhr =new XMLHttpRequest();
                
                xhr.onreadystatechange = () =>{
                    if(xhr.readyState!== 4) return;
                    
                    if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                        console.log(xhr.responseText);
                        console.log(typeof xhr.responseText)
                    }
                };
                //xhr.open('GET','./json/plain.json',true);
                xhr.open('GET','./json/ojb.json',true);
                xhr.send(null); */
                
                const xhr =new XMLHttpRequest();
                    
                    xhr.onreadystatechange = () =>{
                        if(xhr.readyState!== 4) return;
                        
                        if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                            console.log(xhr.responseText);
                            console.log(typeof xhr.responseText)
                        }
                    };
                    //xhr.open('GET','./json/plain.json',true);
                    //xhr.open('GET','./json/ojb.json',true);
                    xhr.open('GET','./json/arr.json',true);
                    xhr.send(null);
                    //1,"Loveweiwei",null
        </script>
    </body>
</html>

JSON的常用方法

　　JSON.parse()

console.log(JSON.parse(xhr.responseText));

console.log(JSON.parse(xhr.responseText).data);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSON 的常用方法</title>
    </head>
    <body>
        <script>
                //1.JSON.parse（）
                //JSON.parse（）可以将JSON格式的字符串解析成js中的对应值
                //一定要是合法的JSON字符串，否则会报错
            const xhr =new XMLHttpRequest();
                
                xhr.onreadystatechange = () =>{
                    if(xhr.readyState!== 4) return;
                    
                    if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                        console.log(xhr.responseText);
                        console.log(typeof xhr.responseText)
                    
                        console.log(JSON.parse(xhr.responseText));
                            
                        /* console.log(JSON.parse(xhr.responseText).data); */
                    }
                };
            
                //xhr.open('GET','./json/plain.json',true);
                xhr.open('GET','./json/arr.json',true);
                /* xhr.open('GET','https://www.imooc.com/api/http/search/suggest?words=js',true); */
                xhr.send(null);
        </script>    
    </body>

</html>

　　　　JSON.stringify()

　　　　使用JSON.parse()和JSON.stringify()封装localStorage

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSON 的常用方法</title>
    </head>
    <body>
        <script type="module">
                //1.JSON.parse（）
                //JSON.parse（）可以将JSON格式的字符串解析成js中的对应值
                //一定要是合法的JSON字符串，否则会报错
            // const xhr =new XMLHttpRequest();
                
            //     xhr.onreadystatechange = () =>{
            //         if(xhr.readyState!== 4) return;
                    
            //         if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
            //             console.log(xhr.responseText);
            //             console.log(typeof xhr.responseText)
                    
            //             console.log(JSON.parse(xhr.responseText));
                            
            //             /* console.log(JSON.parse(xhr.responseText).data); */
            //         }
            //     };
            
            //     //xhr.open('GET','./json/plain.json',true);
            //     xhr.open('GET','./json/arr.json',true);
            //     /* xhr.open('GET','https://www.imooc.com/api/http/search/suggest?words=js',true); */
            //     xhr.send(null);
            
            
            //2.JSON.stringify()
            //JSON.JSON.stringify()可以JS的基本数据类型、对象或者数组
            //转换成JSON格式的字符串
                /* console.log(JSON.stringify({
                    uusername:'alex',
                    age:18,
                })
                ); */
            
            /*     const xhr = new XMLHttpRequest();
                
                
                xhr.open('post','https://www.imooc.com/api/http/search/suggest?words=js',true);
                
                xhr.send(
                    JSON.stringify({
                            username:'alex',
                            age:18,
                    })
                ); */
                
            //3.使用JSON.parse()和JSON.stringify() 封装
                localStorage    
                import{get,set,remove,clear} from './js/storage.js';
                
                set('username','nmb');
                console.log(get('username'));
                
                
                set('nmb2.0',{
                    name:'那么棒',
                    age:18
                });
                console.log(get('nmb2.0'));
                
                remove('username');
                
                clear();
                
        </script>    
    </body>
</html>

posted @ 2023-03-29 10:57 漁夫阅读(469) 评论(0) 收藏举报

刷新页面返回顶部

YuFu

初识JSON&JSON的三种形式&JSON的常用方法

公告