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

JSON的简单使用

2015-09-13 23:02 851 查看
    JSON是JavaScript面向对象语法的一个子集，其 全称为JavaScript Object Notation,是轻量级的数据交换格式。JSON是完全独立的语言，使用标准的语法来和其他编程语言进行数据交换。

一、使用JSON创建对象

       JSON创建对象的格式十分简单，类似于java的map对象，语法为：var variable= { key : value}，因此，创建JSON对象十分简单。

      JSON对象的访问也十分简单，可以使用variable.key进行访问，也可使用类似数组(variable[key])的方式进行访问。下面简单举个例子：

<script>
function test(){
var myJson = {
"name":"张三",
"age":20
};
alert("name:" + myJson.name + ",age:" + myJson.age);//使用variable.key访问
alert("name:" + myJson["name"] + ",age:" + myJson["age"]);//使用variable[key]访问
}
</script>

   JSON是一种通用的字符串格式语言，在使用上有一些注意事项：对于一些特殊字符,例如双引号、反斜杠等需要使用转义字符"\"进行转义。

  使用JSON创建数字类型没有特别的限制，JSON创建的数字支持整数、小数和科记数格式，如下所示<script>

<script>
function testNumber(){
var json = {
type1:12,
type2:1.2,
type3:1e2//科学记数法
}
alert(json.type1 + "," + json.type2 + "," + json.type3);
}
</script>
  JSON可以进行嵌套使用，如下所示：

<script>
function testNest(){
var json = {
name:"张三",
age:20,
address:{
city:"上海",
zipcode:"101010"
}
}
alert("name:" + json.name + ",age:" + json.age + ",city:" + json.address.city + ",zipcode:" + json.address.zipcode);
}
</script>


二、序列化和反序列化

序列化和反序列化需要引入json2.js文件，使用JSON.stringify(value,replacer,space)进行序列化，以下举例说明序列化参数的使用：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON的序列化</title>
</head>
<body onload="serialize();">

</body>
<script src="js/json2.js" type="text/javascript"></script>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}

function serialize(){
var person = new Person("张三",20);
//使用JSON.stringify(value, replacer, space);其中第一个参数必选
var personJson = JSON.stringify(person);
alert(personJson);
/* 当第一个参数为对象，第二个参数为数组时,并且数组中的值和第一个参数的属性相等时，此时，就以数组的值作为key,对象的值作为value进行序列化,
如果数组中没有和对象中的元素的属性相同，则此时结果为{},
*/
var array = ["id","name"];//name和Person的name相同，因此结果为{name:'张三'}
personJson = JSON.stringify(person, array);
alert(personJson);
array = ["id","address"];//array中的元素没有和Person中的元素的值相同，此时序列化的结果为{}
personJson = JSON.stringify(person, array);
alert(personJson);
/*
当第一个参数和第二个参数都是数组的时候，这时候第二个参数被忽略，只有第一个参数被序列化
*/
var firstArray = ["张三","李四"];
var json = JSON.stringify(firstArray, array);
alert(json);
/*
当第二个参数为function,则把序列化后的每个对象传进方法中进行处理，
第二个参数处理方法dealSerialize(key,value);此处的key值为"",vaule为第一个参数的对象
*/
personJson = JSON.stringify(person, dealSerialize);
alert(personJson);
/*
第三个参数space：就是用什么来做分隔符的。
　　如果省略的话，那么显示出来的值就没有分隔符，直接输出来 。
　  如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则默认为10，因为最大值为10。
　　如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。
　　如果仅仅是字符串，就在每行输出值的时候把这些字符串附加上去。当然，最大长度也是10个字符。
*/
array=["name","age"];
alert(JSON.stringify(person, array,5));
alert(JSON.stringify(person, array,"\t"));//制表符
alert(JSON.stringify(person, array,"test"));//在每一行上前加上字符串

}
function dealSerialize(key,value){
return value.age +=1;//对年龄进行+1
}

</script>
</html>


反序列化的使用：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>parse的使用</title>
</head>
<body onload="init();">

</body>
<script type="text/javascript" src="js/json2.js"></script>
<script>
function init(){
//此处的字符串变量必须使用''包含，并且key值必须使用""包含
var jsonString = '{"name":"zhangsan","age":20}';
/*
JSON.parse(text, reviver),字符串转换为JSON需要两个参数，第一个参数必须
*/
var json = JSON.parse(jsonString);
alert(json.name + "," + json.age);
/* 	reviver可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象，则先于父对象转换嵌套对象。 对于每个成员，会发生以下情况：
如果 reviver 返回一个有效值，则成员值将替换为转换后的值。
如果 reviver 返回它接收的相同值，则不修改成员值。
如果 reviver 返回 null 或 undefined，则删除成员。 */
json = JSON.parse(jsonString,dealReviver);
alert(json.name + "," + json.age);
}
function dealReviver(key,value){
if(typeof value == "number"){
//return value + 1;//age + 1
return null;//age赋值为null
}else{
return value;
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  json javascript stringify parse
相关文章推荐
新的分享
章节导航