JSON的用法与在JS中引入JSON方法

最新推荐文章于 2025-09-30 21:42:01 发布

原创最新推荐文章于 2025-09-30 21:42:01 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文介绍了JSON的基本语法，包括数据组织方式、文件类型及MIME类型，并演示了如何使用JavaScript解析JSON文本，还提供了通过JSON字符串创建对象的具体示例。

JSON语法是JavaScript对象表示语法的子集。

1）数据在键值对中

2）数据由逗号分离

3）花括号保存对象

4）方括号保存数组

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

"firstName" : "John"

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

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

JSON文件的文件类型是".json"

JSON文本的MIME类型是"application/jion"

由于JSON语法是JavaScript函数eval（）可用于将JSON文本转换为JavaScript对象。eval（）函数使用的是JavaScript编译器，可解析JSON文本，生成JavaScript对象。必须把文本包围在括号中，这样才能避免错误。

var obj = eval ("(" + txt + ")");

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

解析JSON文本还可以JSON.parse(txt)

因此上面的例子中obj还可以写成

obj = JSON.parse(txt);

在JavaScript载入JSON文件数据用$getJSON('你请求的页面URL'，{参数}，回调函数)

<script type="text/javascript" src="jquery-1.4.4.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
$.getJSON("test.json", 
function(data) { 
alert(data.name); 
}); 
}); 
</script>