参考:

  • JSON:JavaScript 对象表示法(JavaScript Object Notation)。
  • JSON 是存储和交换文本信息的语法。类似 XML。
  • JSON 比 XML 更小、更快,更易解析。
  • 参考:http://www.json.org/

1、什么是 JSON ?

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

  * JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

2、JSON - 转换为 JavaScript 对象

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

  由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

 <!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> <!--引用jQuery库,src可以直接指向本地下载的jQery库-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
<script src="jquery-3.3.1.js"></script> </head> <body class="siblings"> <h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p> <script type="text/javascript">
var JSONObject = {
"name": "Bill Gates",
"street": "Fifth Avenue New York 666",
"age": 56,
"phone": "555 1234567"
}; document.getElementById("jname").innerHTML = JSONObject.name;
document.getElementById("jage").innerHTML = JSONObject.age;
document.getElementById("jstreet").innerHTML = JSONObject.street;
document.getElementById("jphone").innerHTML = JSONObject.phone;
</script> </body>
</html>

  输出结果:

在 JavaScript 中创建 JSON 对象

Name: Bill Gates
Age: 56
Address: Fifth Avenue New York 666
Phone: 555 1234567

3、类似 XML

  • JSON 是纯文本
  • JSON 具有“自我描述性”(人类可读)
  • JSON 具有层级结构(值中存在值)
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输

4、相比 XML 的不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

5、为什么使用 JSON?

  对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

使用 XML

  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中

使用 JSON

  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

6、JSON 语法

6.1 JSON语法规则

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

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

6.2 JSON 名称/值对

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

  名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

 "firstName" : "John"

这很容易理解,等价于这条 JavaScript 语句:

 firstName = "John"

6.3 JSON 值

  JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

6.4 JSON 对象

  JSON 对象在花括号中书写:

  对象可以包含多个名称/值对:

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

  这一点也容易理解,与这条 JavaScript 语句等价:

 firstName = "John"
lastName = "Doe"

6.5 JSON 数组

  JSON 数组在方括号中书写:

  数组可包含多个对象:

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

  在上面的例子中,对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。

6.6 JSON 使用 JavaScript 语法

  因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

  通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

 var employees  = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

  访问 JavaScript 对象数组中的第一项:

 employees[0].lastName;

 // 返回的内容是:
Gates // 修改数据
employees[0].lastName = "Jobs";

  举例:

 <!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> <!--引用jQuery库,src可以直接指向本地下载的jQery库-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
<script src="jquery-3.3.1.js"></script> </head> <body class="siblings"> <h3>通过 JSON 字符串来创建对象</h3>
<p>First name: <span id="fname"></span></p> <script type="text/javascript">
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
]; document.getElementById("fname").innerHTML = employees[0].firstName;
</script> </body>
</html>

  输出结果:

通过 JSON 字符串来创建对象

First name: Bill

6.7 JSON 文件

  • JSON 文件的文件类型是 ".json"
  • JSON 文本的 MIME 类型是 "application/json"

7、JS字符串转换为JSON的四种方法笔记

7.1 JS字符串转换为JSON

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> <script src="jquery-3.3.1.js"></script> <script>
// JSON字符串解析为JSON语言(JavaScript对象表示法)
// 方式一:jQuery插件支持的转换方式
// $.parseJSON( jsonstr ); 或者 jQuery.parseJSON(jsonstr) // 可以将json字符串转换成json对象
var obj1_1 = $.parseJSON('{ "name": "John", "age": 30, "city": "New York"}');
var obj1_2 = $.parseJSON('{ ' +
'"name": "John",' +
'"age": 30,' +
' "city": "New York"' +
'}'); // 方式二:浏览器支持的转换方式(推荐
// JSON.parse(jsonstr); // 可以将json字符串转换成json对象
var obj2 = JSON.parse('{ "name":"John", "age":30, "city": "New York"}'); // 方式三:Javascript支持的转换方式
// eval('(' + jsonstr + ')'); // 可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
var obj3 = eval('(' + '{ "name":"John", "age":30, "city": "New York"}' + ')'); // 方式四:JSON官方的转换方式
// http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法
// 可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。
var obj4 = JSON.parse('{ "name":"John", "age":30, "city": "New York"}'); alert(obj4.age);
</script>
</head> <body>
</body>
</html>

7.2 JSON转换为JS字符串

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> <script src="jquery-3.3.1.js"></script> <script>
// JSON语言(JavaScript对象表示法)转换为字符串
// 方式一:浏览器支持的转换方式(推荐
// JSON.stringify(jsonobj); // 可以将json对象转换成json字符串
var str1 = JSON.stringify({"name":"John", "age":30, "city": "New York"}); // 方式二:JSON官方的转换方式
// http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;
// 可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。
var str2 = JSON.stringify({"name":"John", "age":30, "city": "New York"}); alert(str1);
</script>
</head> <body>
</body>
</html>

Web开发——JavaScript基础(JSON教程)的更多相关文章

  1. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  2. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  3. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  4. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  5. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  6. 使用Eclipse+Maven+Jetty构建Java Web开发环境(几个教程综合集成2014发行)

    工作需要使用Jetty由于web集装箱,得知Eclipse+Maven+Jetty该组合是非常好的,因此,要在网上找了很多教程,但不写或多或少特定的或过时的内容而导致最终的配置失败,易于配置为未来的同 ...

  7. Web开发——HTML基础(图像、音频和视频内容)

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  8. Web前端开发JavaScript基础

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  9. Web开发——jQuery基础

    参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...

随机推荐

  1. 使用插件扩展Docker

    http://wwwbuild.net/dockerone/241249.html   Docker吸引我的,同时也是促使其成功的一个重要方面,是其开箱即用的特性. “开箱即用”是指什么呢?简单来说, ...

  2. 修改Linux用户配置之后先验证再退出

    在服务器上更改完zsh.SSH连接属性.用户密码之后,我们可能想退出重新登录查看是否配置生效.这时,有一个注意事项:不要关闭旧窗口,而是重新打开一个新窗口尝试登录.否则,如果配置改错了,自己就再也没有 ...

  3. SQL 对结果集进行分组排序过滤重复数据

    简单的表操作: select row_number() over(partition by A.gid order by A.gid ) as RowN, A.* from Fit_Order A 关 ...

  4. nginx:not a directory

    项目需要在nginx中提供一个配置文件返回接口的信息,于是就添加了location来实现,本以为很简单的操作,结果访问配置文件时一直返回404,nginx的error log中输出:not a dir ...

  5. Sqlmap 中绕过空格拦截的12个脚本

  6. Mysql数据按天分区,定期删除

    需求: 1.日志表需要按天分区 2.只保留一个月数据 方案: 1.创建两个事件,一个事件生成未来需要的分区,另一个事件定期检查过期数据(移除分区) 2.创建事件每小时执行一次,删除事件每天执行一次 3 ...

  7. mysql表空间加密 keyring encryption

    从5.7.11开始,mysql开始支持物理表空间的加密,它使用两层加密架构.包括:master key 和 tablespace key master key用于加密tablespace key,加密 ...

  8. oss2罗列所有文件

    使用oss python sdk罗列某目录下所有文件. #!/usr/bin/python3 import sys, os import oss2 auth = oss2.Auth('keyID', ...

  9. SFTP工具类

    1.SFTP搭建方法: 地址: http://www.jb51.net/article/101405.htm https://blog.csdn.net/helloloser/article/deta ...

  10. spring-boot项目建立

    使用idea来开发spring-boot项目,对于community版本的idea,由于没有spring-boot插件,所有对于开发spring-boot的web项目来说不是很方便,所以安装Ultim ...