JS中对JOSN的解析
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中对JOSN的解析相关的知识,希望对你有一定的参考价值。
一、什么是JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,
是理想的数据交换格式,同时,JSON是 javascript 原生格式。
非常适合于服务器与 JavaScript 的交互
二、为什么使用JSON而不是XML
他们都是这样说的: 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 html 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性
三、JS中对JSON的解析方式:
1.使用JS自带的eval()函数,转为JSON对象,再直接利用"."号操作属性
(1)data在JS中直接被定义为一个JSON对象
<script type="text/javascript">
var data={
"name": "Jack",
"age": 30,
"isMan": true,
"school": {
"name": "Lonton University",
"location": "English"
}
}
var JSONObj=eval(data);//直接转成JSON对象
alert(JSONObj.name);
alert(JSONObj.school.name);
</script>
(2)data是从后台返回的JSON格式的字符串
<script type="text/javascript">
//var data="{‘name‘: ‘Jack‘}";
//var data="{name: ‘Jack‘}";属性名可加可不加‘单引号,但属性值一定要加单引号
var data="{person:{name:‘Jack‘,sex:‘male‘,age:‘23‘},school:{name: ‘Lonton University‘,location: ‘English‘}}";
var JSONObj=eval("("+data+")");//转成JSON对象,注意:这里要加"("和")",在JS中{}代表一个对象
alert(JSONObj.person.name);
alert(JSONObj.school.name);
alert({});//return [object Object]
</script>
注意:非常重要,JSON中的属性必须要加上双引号"",在实际使用中,经常会因为上面使用单引号或不使用引号造成序死化错误,从而无法生成JSON对象
<script type="text/javascript">
//var data="{‘name‘: ‘Jack‘}";
//var data="{name: ‘Jack‘}";属性名可加可不加‘单引号,但属性值一定要加单引号
var data="{userList:[{name:‘Jack‘,sex:‘male‘,age:‘23‘},{name:‘kate‘,sex:‘female‘,age:‘24‘}],school:{name: ‘Lonton University‘,location:‘English‘}}";
var JSONObj=eval("("+data+")");//将JSON格式的字符串转成JSON对象
//alert(JSONObj.person.name);
alert(JSONObj.school.name);//Lonton University
//遍历数组属性
alert(JSONObj.userList[0].name);//Jack
var size=JSONObj.userList.length
alert(size);//2
for(var i=0;i<size;i++){
alert(JSONObj.userList[i].name);
}
</script>
2.使用Function函数
<script type="text/javascript">
var strJSON = "{name:‘json name‘}";//得到的JSON
var obj = new Function("return" + strJSON)();//转换后的JSON对象
alert(obj.name);//json name
alert(obj.constructor);//function Object(){[native code]}
</script>
1,2方式的缺陷:
a.这种形式将使得性能显著降低,因为它必须运行编译器
b.eval函数还减弱了你的应用的安全性,因为它给被求值的文本赋予了太多的权力。就像with语句执行的方式一样,它降低了语言的性能
c.Function构造器是eval的另一种形式,所以它同样也应该被避免使用。
3.序列化的方式
ECMAScript 5对解析JSON进行规范,定义了全局对象JSON,支持的浏览器有:IE8+,Firefox 3.5+,Safari4+,Chrome和Opera 10.5+;
如果浏览器不支持全局对象JSON,可以在页面中引入json2.js插件 <script type="text/javascript" src="json2.js"></script>
JSON对象提供两个方法:stringify()和parse(),stringify()是将JSON对象转成字符串,而parse()则是将符合规范的字符串转成可用JSON对象。
(1)stringify()
JSON.stringify(value [, replacer] [, space])
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(json); //{"name":"Lanny","age":"25","location":"China"}
</script>
使用数组过滤,只保留:name及locaiton
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student,["name","location"]);
alert(json);//{"name":"Lanny","location":"China"}
</script>
使用函数过滤,对于name属性值单独处理,在之前输出:”my name is :”
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student, function (key, value) {
switch (key){
case "name":
return "my name is " + value;
default :
return value;
}
});
alert(json);//{"name":"my name is Lanny","age":"25","location":"China"}
</script>
使用缩进,缩进4个空白:
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student,null,4);
alert(json);
//返回结果如下:
{
"name": "Lanny",
"age": "25",
"location": "China"
}
</script>
(2)parse()
JSON.parse(text [, reviver])
以下示例演示了如何使用 JSON.stringify 将数组转换成 JSON 字符串,然后使用 JSON.parse 将该字符串还原成数组。
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");
var newArr = JSON.parse(str);
while (newArr.length > 0) {
document.write(newArr.pop() + "<br/>");
}
</script>
// Output: ["a","b","c"] c b a
参考链接:http://www.cnblogs.com/gaojun/p/3394274.html
以上是关于JS中对JOSN的解析的主要内容,如果未能解决你的问题,请参考以下文章