| ylbtech-JSON: JSON 使用 |
| 1. 把 JSON 文本转换为 JavaScript 对象返回顶部 |
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。
| 2. 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 + ")");
在网页中使用 JavaScript 对象：
实例
<p>
名：<span id="fname"></span><br />
姓：<span id="lname"></span><br />
</p>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
| 3. 代码、结果返回顶部 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</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>
结果
| 4. JSON 解析器返回顶部 |
eval() 函数可以编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文件，而不会编译脚本，
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析期的速度更快。
较新的浏览器和最新的 ECMAScript(JavaScript)标准中均包含了原生的对 JSON 的支持。
| Web 浏览器支持 | Web 软件支持 |
|
Firefox(Mozilla)3.5 Internet Explorer 8 Chrome Opera 10 Safari 4 |
jQuery Yahoo UI Prototype Dojo ECMAScript 1.5 |
代码
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</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 = JSON.parse(txt);
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
</body>
</html>
结果
| 5. 对于较老的浏览器，可使用 JavaScript 库返回顶部 |
对于较老的浏览器，可使用 JavaScript 库：
https://github.com/douglascrockford/JSON-js
JSON 格式最初是 originally specified by Douglas Crockford
| 6.返回顶部 |
| 7.返回顶部 |
| 8.返回顶部 |
| 9.返回顶部 |
| 10.返回顶部 |
| 11.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |