JSON教程二

最新推荐文章于 2025-07-02 22:32:58 发布

原创最新推荐文章于 2025-07-02 22:32:58 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

大前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何将JSON数据转换为JavaScript对象的方法，包括使用eval()函数和JSON.parse()方法，并对比了两者的优缺点及安全性问题。

JSON 使用

JSON经常应用到的场景是：在后台应用程序中将响应数据封装成JSON格式，传到前台页面之后，需要将JSON格式转换为JavaScript对象，然后在网页中使用该数据。

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON 实例 - 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串：

var txt = '{ "employees" : [' +      
'{ "firstName":"John" , "lastName":"Doe" },' +        
'{ "firstName":"Anna" , "lastName":"Smith" },' +       
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

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

json字符串转换成json对象：eval()方法

注意事项：IE8(兼容模式)，IE7和IE6也可以使用eval()方法将字符串转成json对象，但是不推荐使用，

因为这种方式不安全eval会执行json字符串的表达式。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
名: <span id="fname"></span><br> 
姓: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

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

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


从 JSON 字符串中创建对象
名: Anna
姓: Smith

eval安全问题：https://www.sojson.com/json/json_eval.html

大家都知道eval()函数就是evaluation：

它的特点如果遇到运算符（/、*、-、+、>>等），它会直接计算结果，下面我们来看一个Demo

//假如鹿晗有一张CD，name为“26-11”。
var txtJson = '{' + 
    '"name": "鹿晗",' + 
    '"cd_name": 26-11' + 
'}';
//利用函数 eval() 转换成JSON对象
var obj = eval ("(" + txtJson + ")");
//输出cd_name
alert("cd_name：" + obj.cd_name);  //cd_name：15

结果为：26 - 11 = 15;

结论：得出的结果如果字符串里含有运算符，那么用 eval()不安全，它的结果是运算后的结果。

JSON 解析器

lamp eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

json字符串转换成json对象：转换函数：JSON.parse()方法

注意：IE8（兼容模式）ok，但是IE6和IE7没有JSON对象，需要额外引入json.js或者json2.js。

例子：

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(txt);

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


Create Object from JSON String
First Name: Anna
Last Name: Smith

附加说明：

对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为"json"，

或者利用$.getJSON()方法获得服务器返回，那么就不需要eval()方法了，因为这时候得到的结果已经是json对象了。

springmvc中通过@requestBody注解实现将json数据转成java对象。内部使用jackson包将json转成java对象

springmvc中通过@responseBody注解实现将java对象转成json输出。