【速成之路】网页编程必会的Ajax——JSON

🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver

🔓本期专栏：【速成之路】Ajax

JSON

- JSON概述
- JSON的使用

JSON概述

JSON( JavaScriptObject Notation, JavaScript 对象表示方法)是一种轻量级的数据交换格式，是基于ECMA Script(欧洲计算机协会制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人们阅读和编写，同时易于机器解析和生成，可以有效地提升网络传输效率。
JSON就是一串字符串，只不过元素会使用特定的符号标注。主要符号表示的含义说明如下：

双括号{}：表示对象。
中括号［］：表示数组。
双引号" "：其中的值是属性或值。
冒号：：表示后者是前者的值（这个值可以是字符串、数字，也可以是另一个数组或对象）。

JSON的语法规则中把数据放在“键/值”对中，并且多个数据之间用逗号隔开。其中，对象由花括号括起来并且用逗号分隔的成员构成，成员是字符串键和上文所述的值由冒号分隔的键值对组成。例如定义一个学生对象student：

{"name":"kun kun", "age":18, "address":{"country":"China", "zip-code":"430022"}}
1

数组由中括号括起来的一组值构成，例如：

[3,1,4,1,5,9,2,6]
1

JSON是 JavaScript 对象的字符串表示法，使用文本表示一个 JavaScript 对象的信息，例如：

var obj={a:'Hello',b:'World'};//这是一个对象，注意键名也可以使用引号包裹
var json='{"a":"Hello","b":"World"}';//这是JSON字符串，本质是一个字符串
1
2

JSON的使用

简单地说，JSON可以将 JavaScript 对象中表示的一组数据转换为字符串，然后可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候再将其还原为各编程语言所支持的数据格式。例如在Ajax中使用时，如果需要用到数组传值，就需要用JSON将数组转化为字符串。JSON数据获取的语法格式如下所示：

JSON对象.键名
JSON对象["键名"]
数组对象［索引］
1
2
3

JSON使用 JavaScript 语法，所以在 JavaScript 中可以直接处理JSON数据。例如可以直接访问本节中定义的student对象：

student.name//返回字符串"kun kun"
student.address.country//返回字符串"China"
1
2

也可以直接修改数据：

student.name="ikun"
1

另外，要实现从JSON字符串转换为 JavaScript 对象，可以使用JSON.parse()方法，示例代码如下所示：

var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是{a:'Hello',b:'World'}
1
2

要实现从 JavaScript 对象转换为JSON字符串，使用JSON. stringify()方法：

var json=JSON.stringify({a:'Hello',b:'World'});
//结果是 {a:'Hello',b:'World'}
1
2

下例对JSON对象和JSON数组进行遍历，其在浏览器中的显示结果如图所示。

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>JSON</title>
   <script>
     //定义JSON对象
     var myJson={'name':'李华','age':18};
     //遍历JSON对象
     for(var key in myJson){
        document.write(key+':'+myJson[key]+"<br>");
    }
     //定义JSON数组，其成员是JSON对象
    var wqJson=[{'name':'张三','age':19},
         {'name':'李四','age':20},
         {'name':'王五','age':21},
    ]
    //遍历JSON数组
    for(var i=0;i<wqJson.length;i++){
       for(var j in wqJson[i]){
       document.write(j+":"+wqJson[i][j]+"<br>")
       }
    }
   </script>
  </head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

图 JSON数据遍历

在这里插入图片描述

相关阅读:
（附源码）springboot儿童教育管理系统毕业设计 281442
电话订货、线下赊账、人工打单，批发生意越做越简单
14：00面试，14：06就出来了，问的问题有点变态。。。。。。
【拥有自己的网站】博客系统——详细解释+代码+详细注释（课设必过）
SQL基础
Eureka之使用详解
Office 2016、2019 解决“你的 Office 许可证有问题”
让iPhone用电脑的网络上网
pdf.js引入方式及初始化配置
Go 语言搭建个人博客（qiucode.cn 重构篇二）

原文地址：https://blog.csdn.net/m0_61684063/article/details/124713152