JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

什么是 JSON?

  • JSON 指的是 JavaScript Object Notation
  • JSON 是轻量级的数据交换格式
  • JSON 独立于语言 *
  • JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法,但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

JSON 实例

JSON 语法定义了一个雇员对象:包含三条员工记录的数组(对象):

JSON 实例

{
"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]
}

JSON 格式评估为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性,JavaScript 程序可以很容易地将 JSON 数据转换成本地的 JavaScript 对象。

JSON 语法规则

  • 数据是名称/值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 数据 - 名称和值

JSON 数据的书写方式是名称/值对,类似 JavaScript 对象属性。

名称/值对由(双引号中的)字段名构成,其后是冒号,再其后是值:

"firstName":"Bill"

JSON 名称需要双引号。JavaScript 名称不需要。

JSON 对象

JSON 对象是在花括号内书写的。

类似 JavaScript,对象能够包含多个名称/值对:

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

JSON 数组

JSON 数组在方括号中书写。

类似 JavaScript,数组能够包含对象:

"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]

  

在上面的例子中,对象 "employees" 是一个数组。它包含了三个对象。

每个对象代表一个人的一条记录(带有名和姓)。

把 JSON 文本转换为 JavaScript 对象

JSON 的通常用法是从 web 服务器读取数据,然后在网页中显示数据。

为了简单起见,可以使用字符串作为输入演示。

首先,创建包含 JSON 语法的 JavaScript 字符串:


然后,使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后,请在您的页面中使用这个新的 JavaScript 对象:

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

文章来源:www.sysoft.net.cn,加v:15844800162深度交流

松软科技Web课堂:JavaScript JSON的更多相关文章

  1. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  2. 松软科技Web课堂:JavaScript 异常

    JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...

  3. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  4. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  5. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  6. 松软科技Web课堂:JavaScript For 循环

    循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...

  7. 松软科技web课堂:JavaScript If...Else 语句

    条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...

  8. 松软科技web课堂:JavaScript 比较和逻辑运算符

    JavaScript 比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false. 比较运算符 比较运算符在逻辑语句中使用,以判定变量或值是否相等. 我们给定 x = 5,下表中解释了比较运 ...

  9. 松软科技web课堂:JavaScript 布尔(逻辑)

    JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...

随机推荐

  1. 【原创】(十二)Linux内存管理之vmap与vmalloc

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. Webstrom怎么修改主题

    开发Node.js程序,当选首选的是webstorm IDE工具,这个不用解释.但是可能很多习惯其它IDE的同学在使用Webstorm的时候,后感觉webstorm的主题,并不怎么适合自己的审美.就 ...

  3. 堆的python实现及其应用

    堆的概念 优先队列(priority queue)是一种特殊的队列,取出元素的顺序是按照元素的优先权(关键字)大小,而不是进入队列的顺序,堆就是一种优先队列的实现.堆一般是由数组实现的,逻辑上堆可以被 ...

  4. Prometheus 自动发现

    目录 简介 环境说明 静态配置 重新加载配置文件 基于文件发现配置 重新加载配置文件 添加主机测试 基于DNS的A记录 修改配置文件 重新加载配置文件 基于DNS的SRV记录自动发现 修改配置文件 重 ...

  5. C数据结构(文件操作,随机数,排序,栈和队列,图和遍历,最小生成树,最短路径)程序例子

    文件操作 文件打开方式               意义     ”r” 只读打开一个文本文件,只允许读数据     ”w” 只写打开或建立一个文本文件,只允许写数据     ”a” 追加打开一个文本 ...

  6. 算法上机题目mergesort,priority queue,Quicksort,divide and conquer

    1.Implement exercise 2.3-7. 2. Implement priority queue. 3. Implement Quicksort and answer the follo ...

  7. 前后端vue和django配置

    django pip源更换 虚拟环境配置 目录和日志配置 数据库配置 用户模块自定义 异常,响应配置 xadmin vue vue基础配置 vue高级配置 vue this问题和样式配置

  8. MATLAB数值计算——0

    目录 MATLAB数值计算 1.solve() 2.fzero() 3.fsolve() MATLAB数值计算 MATLAB中文论坛基础板块常见问题归纳(出处: MATLAB中文论坛) 登录http: ...

  9. 【SpringSecurityOAuth2】源码分析@EnableOAuth2Sso在Spring Security OAuth2 SSO单点登录场景下的作用

    目录 一.从Spring Security OAuth2官方文档了解@EnableOAuth2Sso作用 二.源码分析@EnableOAuth2Sso作用 @EnableOAuth2Client OA ...

  10. 华为“方舟编译器”到底是啥?一文看懂TA如何让手机性能再突破【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...