关于JS中的JSON
2013-10-29 14:38
183 查看
早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代。JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表示结构化的数据。可以直接将JSON格式的字符串传递给eval()进行处理,由于JSON是JS的子集,eval后变成json对象,可以使用’.’操作符直接操作属性;
值得注意:JSON是一种数据格式,不是一种语言,虽然与JS中定义对象字面量的形式相似,但JSON不从属于JavaScript,因为其它语言(如:PHP,JSP)中也有针对JSON的解析和序列化的方法操作。
简单值:如字符串、数值、布尔值和null,但不支持undefined 对象:对象作为一种复杂的数据类型,表示是一组无序的键值对儿,值可以是简单值也可以复杂的数据 数组:数组作为一种复杂的数据类型,表示是一组有序的列表儿,可以通过索引来获取引用的值,值可以是简单值,也可以复杂数据对象
一个简单的JSON示例:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
非常重要:JSON对象的属性(如上例中的“name”)必须加双引号。
在实际使用中,经常会因为上面使用单引号或不使用引号造成序死化错误,从而无法生成JSON对象
JSON对象提供两个方法:stringify()和parse(),stringify()是将JSON对象转成字符串,而parse()则是将符合规范的字符串转成可用JSON对象。
JSON.stringify(value [, replacer] [, space])
value:JSON对象。
replacer:过滤器(可选的),可以是方法或数组,用于过滤操作,如果是数组,则序列化字符串只包含数组中指定的值的JSON属性及属性值,如果是方法,方法传递key,value,可以对JSON对象每一个属性值及值进行处理后返回。
space:是否保留缩进,默认不保留,并且删除所有换行。
1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来
2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10.
3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。
4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。
实例:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用数组过滤,只保留:name及locaiton
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用函数过滤,对于name属性值单独处理,在之前输出:”my name is :”
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用缩进,缩进4个空白:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
parse()
参数
text :必需。 一个有效的 JSON 字符串。 reviver :可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况:
如果 reviver 返回一个有效值,则成员值将替换为转换后的值。
如果 reviver 返回它接收的相同值,则不修改成员值。
如果 reviver 返回 null 或 undefined,则删除成员。
返回值:一个对象或数组
示例:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
以下示例演示了如何使用 JSON.stringify 将数组转换成 JSON 字符串,然后使用 JSON.parse 将该字符串还原成数组。
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
值得注意:JSON是一种数据格式,不是一种语言,虽然与JS中定义对象字面量的形式相似,但JSON不从属于JavaScript,因为其它语言(如:PHP,JSP)中也有针对JSON的解析和序列化的方法操作。
语法
JSON可以表示以下三种值:简单值:如字符串、数值、布尔值和null,但不支持undefined 对象:对象作为一种复杂的数据类型,表示是一组无序的键值对儿,值可以是简单值也可以复杂的数据 数组:数组作为一种复杂的数据类型,表示是一组有序的列表儿,可以通过索引来获取引用的值,值可以是简单值,也可以复杂数据对象
一个简单的JSON示例:
{ "name": "Jack", "age": 30, "isMan": true, "school": { "name": "Lonton University", "location": "English" } }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
非常重要:JSON对象的属性(如上例中的“name”)必须加双引号。
在实际使用中,经常会因为上面使用单引号或不使用引号造成序死化错误,从而无法生成JSON对象
序列化
JSON被大家所认可,除了语法是JavaScript语法子集,更主要是可以直接eval序列化(但有一定风险,可能会执行一些恶意代码,如读cookie等)成可用的JS对象直接使用。ECMAScript 5对解析JSON进行规范,定义了全局对象JSON,支持的浏览器有:IE8+,Firefox 3.5+,Safari4+,Chrome和Opera 10.5+;JSON对象提供两个方法:stringify()和parse(),stringify()是将JSON对象转成字符串,而parse()则是将符合规范的字符串转成可用JSON对象。
stringify()
JSON.stringify(value [, replacer] [, space])
value:JSON对象。
replacer:过滤器(可选的),可以是方法或数组,用于过滤操作,如果是数组,则序列化字符串只包含数组中指定的值的JSON属性及属性值,如果是方法,方法传递key,value,可以对JSON对象每一个属性值及值进行处理后返回。
space:是否保留缩进,默认不保留,并且删除所有换行。
1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来
2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10.
3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。
4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。
实例:
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"}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用数组过滤,只保留:name及locaiton
var json = JSON.stringify(student,["name","location"]); alert(json);//{"name":"Lanny","location":"China"}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用函数过滤,对于name属性值单独处理,在之前输出:”my name is :”
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"}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用缩进,缩进4个空白:
var json = JSON.stringify(student,null,4);
alert(json);
//返回结果如下:
{
"name": "Lanny",
"age": "25",
"location": "China"
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
parse()
JSON.parse(text [, reviver])
参数
text :必需。 一个有效的 JSON 字符串。 reviver :可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况:
如果 reviver 返回一个有效值,则成员值将替换为转换后的值。
如果 reviver 返回它接收的相同值,则不修改成员值。
如果 reviver 返回 null 或 undefined,则删除成员。
返回值:一个对象或数组
示例:
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}'; var contact = JSON.parse(jsontext);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
以下示例演示了如何使用 JSON.stringify 将数组转换成 JSON 字符串,然后使用 JSON.parse 将该字符串还原成数组。
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/>"); } // Output: 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/>"); } // Output: ["a","b","c"] c b a
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
相关文章推荐
- 关于JS解析编历JSON数组(含多维数组)
- 关于JS中的JSON
- 关于JS中的JSON
- 关于如何将js中的数组转为json格式
- 关于js中 json对象和json字符串的总结
- 关于JS中的JSON
- 【转载】关于JS读取Json的问题
- 关于前台js中json的处理
- 关于JS 对象与JSON对象
- 关于json的理解(js中)
- 关于gulpfile.js和package.json
- 关于JS的函数JSON.parse()和JSON.stringify
- 关于 spring3 和spring4 中返回json 以及调用 js 和对原项目的修改
- 关于js向后台传json类型的多个对象 及后台java接收并取出每一个对象中的值
- 关于asp.net 引用外部js文件或者json文件中文乱码的问题
- js 下关于json的销毁和添加
- 关于js传送json到.net后台处理
- 关于js处理json格式的数据时遇到的问题
- 关于用js(jquery)遍历由php传递过来的json数据的方法介绍
- 关于JS读取Json的问题