深入学习js中的json

最新推荐文章于 2020-11-27 18:37:19 发布

jiangtao7913

最新推荐文章于 2020-11-27 18:37:19 发布

阅读量318

点赞数

分类专栏：回顾学习

本文链接：https://blog.csdn.net/jiangtao7913/article/details/50443991

版权

回顾同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

学习

17 篇文章 0 订阅

订阅专栏

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在javascript中创建json对象</title>
<script type="text/javascript">
//创建json对象,json有两种格式{}表示json对象，[]表示json数组
var jsonData={
"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:<span id="jname"></span><br/>
age:<span id="jage"></span><br/>
address:<span id="jaddress"></span><br/>
phone:<span id="jphone"></span<br/>
</p>
</body>
</html>

json的特性：

json是纯文本，json具有自我描述性（人类可读），json具有层级结构值中存在值，json可以通过javascript进行解析（使用内建的 JavaScript eval() 方法进行解析），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 语句等价：

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，您可以创建一个对象数组，并像这样进行赋值：

var employees = [

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

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

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

];

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

返回的内容是：

Gates

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过json对象来创建对象</title>
</head>
<body>
<p>
aaa<span id="nameAndAge"></span>
</p>
<script type="text/javascript">
 var employees=[
  {"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 的支持。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过浏览器自带的json解析器解析json字符串</title>
</head>

<body>
<p>
name:<span id="name"></span><br/>
age:<span id="age"></span>
</p>
<script type="text/jscript">
 var txt='{"employees":['+
 '{"name":"jt1","age":"18"},'+
 '{"name":"jt2","age":"20"},'+
 '{"name":"jt3","age":"30"}]}';
 var obj=JSON.parse(txt);
 var name=document.getElementById("name").innerHTML=obj.employees[0].name+" ";
 
 document.getElementById("age").innerHTML=obj.employees[1].age;
</script>
</body>
</html>

jiangtao7913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入学习js中的json

1.json是javascript对象表示法，json是存储和交换文本信息的语法，类似于XMLjson比XML更小，更易解析，更快json能够使用javascript内建的eval()函数来构建原生javascrpt对象。下面这个例子表示创建json对象，并获取它的值http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
复制链接

扫一扫