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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JSON 使用的更多相关文章

  1. 使用TSQL查询和更新 JSON 数据

    JSON是一个非常流行的,用于数据交换的文本数据(textual data)格式,主要用于Web和移动应用程序中.JSON 使用“键/值对”(Key:Value pair)存储数据,能够表示嵌套键值对 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  4. Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  5. .NET Core系列 ： 2 、project.json 这葫芦里卖的什么药

    .NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...

  6. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  8. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  9. .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator

    去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...

  10. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

随机推荐

  1. music cube

    music cubehttps://www.youtube.com/watch?v=HBCdC7r7Mp4Blender Tutorial: Make anything react with musi ...

  2. Python 3.5 in win10 pip install Orange3

    http://www.lfd.uci.edu/%7Egohlke/pythonlibs/ 下载Orange3 以及 依赖包 注意网页上标出的Orange 的依赖,以及 https://github.c ...

  3. CH4701 天使玩偶

    题意 4701 天使玩偶 0x40「数据结构进阶」例题 描述 题目PDF 样例输入 2 3 1 1 2 3 2 1 2 1 3 3 2 4 2 样例输出 1 2 来源 石家庄二中Violet 3杯省选 ...

  4. 2013级计算机学院数字媒体专业李成梁（笛卡尔积，概率树状图）& 学生选课

    初中数学问这个向量 ( *  , 计算学院 , * , *  ) 任取一个向量来自计算机的概率     4*1*100*10000/ 8千万 限定在计科院数字媒体技术专业大二上期选课这个小的范围 学生 ...

  5. Tomcat三种项目部署方式

    第一种:直接将项目放在webapps目录下 材料:项目文件名hello,文件hello.html如图: 访问地址: 注释:hello  项目文件名 hello.html 访问的文件名字 第二种:修改c ...

  6. Modularizing your graphQL schemas

    转自: https://tomasalabes.me/blog/nodejs/graphql/2018/07/11/modularizing-graphql.html Modularizing you ...

  7. JavaScript Constructor & prototype

    阮一峰 JavaScript OOD 三部曲: 封装 JS 是一种基于对象(object-based)的语言. 但是JS不是一种真正的OOP语言, 因为语法中没有class. 以下就是简单的封装. 把 ...

  8. 在CentOS 6上使用 AWStats 分析 httpd 和 Tomcat 日志

    准备工作: Awstats 是由perl语言编写的,所以要首先准备好awstats的运行环境.# yum install –y perl*   Apache 一.首先,要安装apache服务器,并且启 ...

  9. python之路---12 生成器 推导式

    三十.函数进阶 1.生成器    函数中有yield 的就是生成器函数(替代了return) 本质就是迭代器   一个一个的创建对象     节省内存 ①创建生成器       最后以yield结束 ...

  10. KNN算法原理（python代码实现）

    kNN(k-nearest neighbor algorithm)算法的核心思想是如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性 ...