日期:2014-05-16  浏览次数:20325 次

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

首先明确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 ("(&quo