JavaScript高级__JSON

一、什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是轻量级的文本数据交换格式

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON— 独立于语言的轻量级的文本数据交换格式。

在没有JSON之前我们使用XML充当数据交换格式。

JSON与 XML 相同之处

JSON 是纯文本

JSON 具有”自我描述性”（人类可读）

JSON 具有层级结构（值中存在值）

JSON 可通过 JavaScript 进行解析

JSON 数据可使用 AJAX 进行传输

JSON与 XML 不同之处

没有结束标签

更短

读写的速度更快

能够使用内建的 JavaScript eval() 方法进行解析

使用数组

不使用保留字

二、为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

        读取 XML 文档

        使用 XML DOM 来循环遍历文档

        读取值并存储在变量中

使用 JSON

        读取 JSON 字符串

        用 eval() 处理 JSON 字符串

三、JSON数据的组成

1.json对象

“{}”–json对象

“{}”包含—名称/值对【键值对】/ json数组 / json对象

JSON 名称/值对【键值对】书写格式是：

key : value—–”name”:zhangsan

JSON 名称/值对【键值对】中的键，使用双引号包围

JSON 名称/值对【键值对】中的值

1.数字（整数或浮点数） “age”:30

2.字符串（在双引号中）”name”:”zhangsan”

3.逻辑值（true 或 false）”flag”:true

4.数组（在中括号中）”array”:[]

5.对象（在大括号中）”obj”:{}

6.null “runoob”:null

2.json数组

“[]”–json数组

“[]”包含—具体数据值/json对象

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //JSON--JavaScript 对象表示法
            //独立于语言的轻量级的文本数据交换格式。
            //3.JSON数据的组成
            //json对象
            //"{}"----json对象
            //键值对
            //键:---使用双引号包围
            //值：
            /*
            1.数字（整数或浮点数），
            2.字符串（在双引号中）
            3.逻辑值（true 或 false）
            4.数组（在中括号中）
            5.对象（在大括号中）
            6.null
            */
            //javasctipt的对象
            //var student={stuid:1001,stuname:"zhangsan"};
            //student.stuage=23;
            //alert(student.stuage);

            //JSON对象
            /*var person={"id":1002,
                        "name":"fxt",
                        "testarr":["test1","test2"],
                         "testobj":{"objid":101,"objname":"name"}}
            */
            /*var testjson={"id":1002,
                         "name":"lisi",
                         "flag":true,
                         "testarr":[{"obj1":1,"objname":"arr1"},{"obj":2,"objname":"arr2"}],
                         "testobj":{"objid":101,"objname":"name"}};*/
            //json对象中可以包含数组/其他对象
            //json数组可以包含json对象

            //json数组---存放多个数据
            //[]---json数组
            //具体数据值/json对象
            var address = [
                    { "type": "家庭地址", "info": "西安高新一路" },
                    { "type": "工作地址", "info": "西安丈八四路" },
                ];
        </script>
    </head>
    <body>
        
    </body>
</html>

四、JSON数据的转换

我们得到的json数据有可能是json对象，也有可能是json字符串。因此我们就需要将json对象与json字符串进行转换。

Json对象转换成Json字符串

1.可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

Json字符串转换成Json对象

1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象。【推荐使用】

2.eval(“(“+str+”)”);注意：必须有”(“

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //JSON数据的转换
            window.onload=function(){
                //1.判断得到的是json对象还是json字符串。
                var student={
                    "stuid":1002,
                    "stuname":"zhangsan",
                    "stuage":22
                }
                //alert(student);//[object Object]这个就是JSON对象返回是里面内容{"stuid":1002,"stuname":"zhangsan","stuage":22}是JSON字符串
                 
                //2.Json对象转换成Json字符串
                //1.可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
                var JSONstr= JSON.stringify(student);
                alert(JSONstr);//{"stuid":1002,"stuname":"zhangsan","stuage":22}
                
                //3.Json字符串转换成Json对象
                //使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
                //自己创建字符串对象
                var student2="{\"stuid\":1001,"+
                            "\"stuname\":\"zhangsan\","+
                            "\"stusex\":true,"+
                            "\"stuaddress\":[{\"addresstype\":\"家庭\",\"addressinfo\":\"西安\"},"+
                            "{\"addresstype\":\"工作\",\"addressinfo\":\"北京\"}]}";
                alert(student2);//字符串对象
                var stu2Json= JSON.parse(student2);
                //alert(stu2Json);//[object Object]
                //2.eval("("+str+")");
                var stu2Json2=eval("("+student2+")");
                alert(stu2Json2);//[object Object]
            }
        </script>
    </head>
    <body>
        
    </body>
</html>

五、JSON数据的解析

1.将json数据变成json对象

2.json对象名称.属性名称

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //JSON数据的转换
            window.onload=function(){
                //1.判断得到的是json对象还是json字符串。
                var student={
                    "stuid":1002,
                    "stuname":"zhangsan",
                    "stuage":22
                }
                //alert(student);//[object Object]这个就是JSON对象返回是里面内容{"stuid":1002,"stuname":"zhangsan","stuage":22}是JSON字符串
                 
                //2.Json对象转换成Json字符串
                //1.可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
                var JSONstr= JSON.stringify(student);
                alert(JSONstr);//{"stuid":1002,"stuname":"zhangsan","stuage":22}
                
                //3.Json字符串转换成Json对象
                //使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
                //自己创建字符串对象
                var student2="{\"stuid\":1001,"+
                            "\"stuname\":\"zhangsan\","+
                            "\"stusex\":true,"+
                            "\"stuaddress\":[{\"addresstype\":\"家庭\",\"addressinfo\":\"西安\"},"+
                            "{\"addresstype\":\"工作\",\"addressinfo\":\"北京\"}]}";
                alert(student2);//字符串对象
                var stu2Json= JSON.parse(student2);
                //alert(stu2Json);//[object Object]
                //2.eval("("+str+")");
                //将json字符串转换为Json对象并赋值给变量
                var stu2Json2=eval("("+student2+")");
                alert(stu2Json2);//[object Object]

                //5.JSON数据的解析
                  //5.1将json数据变成json对象
                  //5.2json对象名称.属性名称
                document.write("<h1>学生编号:"+stu2Json2.stuid+"</h1>");
				document.write("<h1>学生姓名:"+stu2Json2.stuname+"</h1>");
            }
        </script>
    </head>
    <body>
        
    </body>
</html>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79856.html

JavaScript高级__JSON

相关推荐

分享到: