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

深入学习js中的json

2015-12-31 22:52 681 查看

1.json是javascript对象表示法，json是存储和交换文本信息的语法，类似于XML

json比XML更小，更易解析，更快

json能够使用javascript内建的eval()函数来构建原生javascrpt对象。

下面这个例子表示创建json对象，并获取它的值

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>在javascript中创建json对象</title>

<scripttype="text/javascript">

//创建json对象,json有两种格式{}表示json对象，[]表示json数组

varjsonData={

"name":"jt",

"age":"18",

"address":"shenzheng",

"phone":"123456"

};

document.getElementById("jname").innerHTML=jsonData.name;

document.getElementById("jname").innerHTML=jsonData.age;

document.getElementById("jname").innerHTML=jsonData.address;

document.getElementById("jname").innerHTML=jsonData.phone;

</script>

</head>

<body>

<h2>在javascript中创建json对象</h2>

<p>

name:<spanid="jname"></span><br/>

age:<spanid="jage"></span><br/>

address:<spanid="jaddress"></span><br/>

phone:<spanid="jphone"></span<br/>

</p>

</body>

</html>

json的特性：

json是纯文本，json具有自我描述性（人类可读），json具有层级结构值中存在值，json可以通过javascript进行解析（使用内建的JavaScripteval()方法进行解析），json可以使用ajax进行传输。

json语法规则：

1.数据在名称/值对中

2.数据有逗号分隔

3.花括号保存对象{}

4.方括号保存数组[]

JSON名称/值对

JSON数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"firstName":"John"

这很容易理解，等价于这条JavaScript语句：

firstName="John"

json值可以是：

1.数字（整数或浮点数）

2.字符串（在双引号中）

3.逻辑值（true或则false）

4.数组在方括号中

5.对象在花括号中

6.null

JSON对象

json对象在花括号中书写，对象可以包含多个名称/值对

{"firstName":"John","lastName":"Doe"}

这一点也容易理解，与这条JavaScript语句等价：
[code]firstName="John"
lastName="Doe"

JSON数组

json数组在方括号中书写，

"employees":[

	{"firstName":"John","lastName":"Doe"},

	{"firstName":"Anna","lastName":"Smith"},

	{"firstName":"Peter","lastName":"Jones"}

在上面的例子中emploees数组中包含3个对象，每个对象代表一条关于某人（有姓和名）的记录。

JSON使用JavaScript语法

因为JSON使用JavaScript语法，所以无需额外的软件就能处理JavaScript中的JSON。
通过JavaScript，您可以创建一个对象数组，并像这样进行赋值：

varemployees=[

{"firstName":"Bill","lastName":"Gates"},

{"firstName":"George","lastName":"Bush"},

{"firstName":"Thomas","lastName":"Carter"}

];

可以像这样访问JavaScript对象数组中的第一项：
[code]employees[0].lastName;

返回的内容是：
[code]Gates

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>通过json对象来创建对象</title>
</head>
<body>
<p>
aaa<spanid="nameAndAge"></span>
</p>
<scripttype="text/javascript">
varemployees=[
{"name":"jt1","age":"18"},
{"name":"jt2","age":"19"},
{"name":"jt3","age":"20"}
];
alert(employees[0].age);
employees[0].age=30;
alert(employees[0].age);
document.getElementById("nameAndAge").innerHTML=11;
</script>
</body>
</html>

JSON解析器
提示：eval()函数可编译并执行任何JavaScript代码。这隐藏了一个潜在的安全问题。使用JSON解析器将JSON转换为JavaScript对象是更安全的做法。JSON解析器只能识别JSON文本，而不会编译脚本。
在浏览器中，这提供了原生的JSON支持，而且JSON解析器的速度更快。
较新的浏览器和最新的ECMAScript(JavaScript)标准中均包含了原生的对JSON的支持。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>通过浏览器自带的json解析器解析json字符串</title>
</head>

<body>
<p>
name:<spanid="name"></span><br/>
age:<spanid="age"></span>
</p>
<scripttype="text/jscript">
vartxt='{"employees":['+
'{"name":"jt1","age":"18"},'+
'{"name":"jt2","age":"20"},'+
'{"name":"jt3","age":"30"}]}';
varobj=JSON.parse(txt);
varname=document.getElementById("name").innerHTML=obj.employees[0].name+"";

document.getElementById("age").innerHTML=obj.employees[1].age;
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航