在JS环境下的JSON的认识和使用以及JS如何解析JSON

迷南。 2022-08-27 00:29 20阅读 0赞

首先明确JSON的含义：JavaScript Object Notation  
我们知道存储数据交换数据可以通过XML(这个在之前的一篇博客讲到ASP.NET C\#怎样读取XML中的数据)，可以通过数据库(这个最普遍)，也可以通过JSON。  
JSON是纯文本，没有结束标签。

可以使用数组，有层级结构(这个就预示着下面可以用stuList.stuList\[0\].stuName这种写法)  
JSON的语法类似XML,但相比之下，比XML更小，更快，更容易解析。  
  
我们这里讨论如何通过JavaScript对JSON进行解析

(这个实质上就是对JavaScript对象的操作，把JSON数组或对象看成JavaScript对象进行处理，如果JSON是写在另外一个文本中的就先把其转换解析成JavaScript对象)

暂时不考虑C\#对JSON的解析。  
  
  
注意：这里只要认清这两点就行了  
1.JSON语法是JavaScript对象表示法语法的子集  
2.因为1，所以无需额外的东西就能处理JavaScript中的JSON  
  
  
JSON用的最多的是JSON对象和JSON数组，其中JSON数组用的最为频繁。  
JSON对象：  
\{"stuName":"钢铁侠","stuAge":20\}  
  
JSON数组(stuList数组包含了三个对象)：  
\{"stuList":  
\[  
\{"stuName":"钢铁侠","stuAge":20\}  
\{"stuName":"蜘蛛侠","stuAge":30\}  
\{"stuName":"蝙蝠侠","stuAge":40\}  
\]  
\}  
  
  
下面就是一个JSON数组的例子，其实对于JavaScript处理这种JSON数据实质上就看成处理的JavaScript对象。

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            var stuList = {
                "stuList":
                [
                { "stuName": "钢铁侠", "stuAge": 20, "stuImage": "images/1.png" },
                { "stuName": "蜘蛛侠", "stuAge": 30, "stuImage": "images/2.png" },
                { "stuName": "蝙蝠侠", "stuAge": 40, "stuImage": "images/3.png" },
                { "stuName": "绿巨人", "stuAge": 50, "stuImage": "images/4.png" }
                ]
            };
            var length = stuList.stuList.length;
            var stu1_name = stuList.stuList[0].stuName;
            alert(stu1_name);
        </script>
    </head>
    <body>
    </body>
    </html>

以上是JSON形式的数据已经写在JavaScript中的情形，那么怎么把写在文本中的数据转换成JavaScript对象再进行处理呢

总结就是一句话：json不作为外部文件就不需要eval()解析，如果直接在js中定义的json类型的数据，可以直接通过对象找到对应的值。

这个在W3CShool中讲的很好，主要就是用JavaScript的eval()函数进行解析，我这里就再写一遍。

<html>
    <body>
    <h2>通过 JSON 字符串来创建对象</h3>
    <p>
    First Name: <span id="fname"></span><br /> 
    Last Name: <span id="lname"></span><br /> 
    </p> 
    <script type="text/javascript">
    var txt = '{"employees":[' +
    '{"firstName":"Bill","lastName":"Gates" },' +
    '{"firstName":"George","lastName":"Bush" },' +
    '{"firstName":"Thomas","lastName":"Carter" }]}';
    
    var obj = eval ("(" + txt + ")");
    
    document.getElementById("fname").innerHTML=obj.employees[1].firstName 
    document.getElementById("lname").innerHTML=obj.employees[1].lastName 
    </script>
    </body>
    </html>

在比较新的浏览器，提供了原生的JSON支持，而且这种JSON解析更快。  
这里的代码重要把  
var obj = eval("("+ txt +")")  
改成  
var obj = JSON.parse(txt)  //这个是在较新的浏览器的情况下