• 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 对象。

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12 
13     </head>
14     
15     <body class="siblings">
16         
17         <h2>在 JavaScript 中创建 JSON 对象</h2>
18         <p>
19             Name: <span id="jname"></span><br />
20             Age: <span id="jage"></span><br />
21             Address: <span id="jstreet"></span><br />
22             Phone: <span id="jphone"></span><br />            
23         </p>
24         
25         <script type="text/javascript">
26             var JSONObject = {
27                 "name": "Bill Gates",
28                 "street": "Fifth Avenue New York 666",
29                 "age": 56,
30                 "phone": "555 1234567"            
31             };
32             
33             document.getElementById("jname").innerHTML = JSONObject.name;
34             document.getElementById("jage").innerHTML = JSONObject.age;
35             document.getElementById("jstreet").innerHTML = JSONObject.street;
36             document.getElementById("jphone").innerHTML = JSONObject.phone;        
37         </script>
38         
39     </body>
40 </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 数据的书写格式是：名称/值对。

    　　名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

    1 "firstName" : "John"

    这很容易理解，等价于这条 JavaScript 语句：

    1 firstName = "John"

    6.3 JSON 值

    　　JSON 值可以是：

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

    6.4 JSON 对象

    　　JSON 对象在花括号中书写：

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

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

    　　这一点也容易理解，与这条 JavaScript 语句等价：

    1 firstName = "John"
2 lastName = "Doe"

    6.5 JSON 数组

    　　JSON 数组在方括号中书写：

    　　数组可包含多个对象：

    1 {
2 　　"employees": [
3 　　{ "firstName":"John" , "lastName":"Doe" },
4 　　{ "firstName":"Anna" , "lastName":"Smith" },
5 　　{ "firstName":"Peter" , "lastName":"Jones" }
6 　　]
7 }

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

    6.6 JSON 使用 JavaScript 语法

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

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

    1 var employees  = [
2     { "firstName":"Bill" , "lastName":"Gates" },
3     { "firstName":"George" , "lastName":"Bush" },
4     { "firstName":"Thomas" , "lastName": "Carter" }
5 ];

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

    1 employees[0].lastName;
2 
3 // 返回的内容是：
4 Gates
5 
6 // 修改数据
7 employees[0].lastName = "Jobs";

    　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12 
13     </head>
14     
15     <body class="siblings">
16         
17         <h3>通过 JSON 字符串来创建对象</h3>
18         <p>First name: <span id="fname"></span></p>
19         
20         <script type="text/javascript">
21             var employees = [
22                 { "firstName":"Bill" , "lastName":"Gates" },
23                 { "firstName":"George" , "lastName":"Bush" },
24                 { "firstName":"Thomas" , "lastName": "Carter" }
25             ];
26             
27             document.getElementById("fname").innerHTML = employees[0].firstName;
28         </script>
29         
30     </body>
31 </html>

    　　输出结果：

    通过 JSON 字符串来创建对象

    First name: Bill

    6.7 JSON 文件

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

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

    7.1 JS字符串转换为JSON

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <script>
12             // JSON字符串解析为JSON语言（JavaScript对象表示法）
13             // 方式一：jQuery插件支持的转换方式
14             // $.parseJSON( jsonstr ); 或者 jQuery.parseJSON(jsonstr)    // 可以将json字符串转换成json对象 
15             var obj1_1 = $.parseJSON('{ "name": "John", "age": 30, "city": "New York"}');
16             var obj1_2 = $.parseJSON('{ ' + 
17                 '"name": "John",' + 
18                 '"age": 30,' + 
19                 ' "city": "New York"' + 
20             '}');
21             
22             // 方式二：浏览器支持的转换方式（推荐）
23             // JSON.parse(jsonstr);     // 可以将json字符串转换成json对象 
24             var obj2 = JSON.parse('{ "name":"John", "age":30, "city": "New York"}');
25             
26             // 方式三：Javascript支持的转换方式
27             // eval('(' + jsonstr + ')');    // 可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 
28             var obj3 = eval('(' + '{ "name":"John", "age":30, "city": "New York"}' + ')');
29             
30             // 方式四：JSON官方的转换方式
31             // http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
32             // 可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
33             var obj4 = JSON.parse('{ "name":"John", "age":30, "city": "New York"}');
34             
35             alert(obj4.age);            
36         </script>
37     </head>
38     
39     <body>        
40     </body>
41 </html>

    7.2 JSON转换为JS字符串

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <script>
12             // JSON语言（JavaScript对象表示法）转换为字符串
13             // 方式一：浏览器支持的转换方式（推荐）
14             // JSON.stringify(jsonobj);     // 可以将json对象转换成json字符串 
15             var str1 = JSON.stringify({"name":"John", "age":30, "city": "New York"});
16             
17             // 方式二：JSON官方的转换方式
18             // http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
19             // 可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
20             var str2 = JSON.stringify({"name":"John", "age":30, "city": "New York"});
21             
22             alert(str1);            
23         </script>
24     </head>
25     
26     <body>        
27     </body>
28 </html>
  • 相关阅读:
    Java从静态代理到动态代理
    Redis持久化
    Linux top命令详解
    从Java线程到线程池
    NodeJs的学习
    使用<金蝶云星空集成开发平台>创建单据的操作步骤
    Maven项目的创建
    XCX_豆瓣电影
    小程序，新手上路
    更改Apache虚拟目录并授予权限 及 { 修改索引页 }
  • 原文地址：https://www.cnblogs.com/zyjhandsome/p/9795030.html
Copyright © 2020-2023  润新知