您的位置：首页 > Web前端 > JavaScript

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

2014-04-22 19:02 686 查看
首先明确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) //这个是在较新的浏览器的情况下
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航