Web开发——JavaScript基础（JSON教程）
参考：
- 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教程）的更多相关文章
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- Web开发——HTML基础
文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- 使用Eclipse+Maven+Jetty构建Java Web开发环境(几个教程综合集成2014发行)
工作需要使用Jetty由于web集装箱,得知Eclipse+Maven+Jetty该组合是非常好的,因此,要在网上找了很多教程,但不写或多或少特定的或过时的内容而导致最终的配置失败,易于配置为未来的同 ...
- Web开发——HTML基础（图像、音频和视频内容）
参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...
- Web前端开发JavaScript基础
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
- Web开发——jQuery基础
参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
随机推荐
- [MHA]master_ip_failover 测试可以使用的IP 地址切换脚本
#!/usr/bin/env perluse strict;use warnings FATAL => 'all'; use Getopt::Long; my ( $command, ...
- 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri
最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...
- Apache-配置、测试和调试
首先执行下面的指令列出有用的Apache配置信息 grep -v '#' /usr/local/apache2/etc/httpd.conf |grep -v '^$' ServerRoot &quo ...
- Android ANR的产生与分析
ANR即Application Not Responding应用无响应,一般在ANR的时候会弹出一个应用无响应对话框.也许有些开发者在使用某些手机开发中不在弹出应用无响应弹出框,特别是国产手机An ...
- springmvc(二) ssm框架整合的各种配置
ssm:springmvc.spring.mybatis这三个框架的整合,有耐心一步步走. --WH 一.SSM框架整合 1.1.整合思路 从底层整合起,也就是先整合mybatis与spring,然后 ...
- ph 提交代码的步骤；
ph 提交代码的步骤: git status 查看状态: ls -ah 查看文件: git stash list 查看本地缓存的文件: git branch 查看本地的分支: git checkout ...
- Nginx SSL 结合Tomcat 重定向URL变成HTTP的问题
http://www.siven.net/posts/d925bb5d.html *********************************************** 问题描述 由于要配置服 ...
- mysqldump定时备份数据库
mysql服务器ip:192.168.0.10 备份服务器ip:192.168.0.11 数据库名称:db_product 思路:在mysql服务器A上创建一个用户分配权限专门用于数据库备份,A服务器 ...
- 【转】C# 高性能 TCP 服务的多种实现方式
原文链接: http://www.cnblogs.com/gaochundong/p/csharp_tcp_service_models.html 开源库: https://github.com/ga ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.0:compile (default-compile) on project demo: Fatal error com piling: 无效的标记: -parameters
背景:本项目使用JDK1.8 编译maven工程的时候出现如下错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-pl ...