JSON 学习笔记

最新推荐文章于 2023-04-22 11:42:34 发布
最新推荐文章于 2023-04-22 11:42:34 发布
阅读量310 收藏
点赞数
分类专栏： web前端 AJAX 文章标签： JSON
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42102911/article/details/103096334
版权

引言 ：我们经常会说JSON是什么？ 不就是定义的一种数据格式嘛，那到底这是一种怎样的数据格式了，今天我们就来揭下这层神秘的面纱。 

 1.1  什么是JSON?

  JSON 是存储和交换文本信息的语法，类似于 XML ，但是比 XML 更小、更快、更易解析。

  • JSON 指的时 JavaScript 对象表示法（JavaScript Object Notation）。
  • JSON 是轻量级的文本数据交换格式。
  • JSON 独立于语言 ： 使用JavaScript 语法来描述数据对象，但是JSON 仍然独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态编程语言都支持JSON（PHP、JSP 、 .NET）。
  • JSON具有自我描述性，更易理解。

 1.1.1 JSON 实例 

{
    "sites":[

       {"name":"竹林学者"，“url”:"zhulinxuezhe.cn"},
       {"name":"google", "url" : "www.google.com"}

    ]

}

1.2 JSON - 转换为 JavaScript 对象

JSON 在文本格式语法上与创建 JavaScript 对象的代码相同，故无需解析器，JavaScript 程序能够使用内建的eval()函数，用JSON 数据来生成原生的JavaScript 对象。

 1.3 JSON 与 XML 相比 的 相同之处 和不同之处 

 1.3.1 相同之处 

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

1.3.2 不同之处

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

1.4 为什么使用JSON ？

对于 AJAX 程序来说，JSON 比 XML 更快更易使用

1.4.1 使用XML 

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

1.4.2 使用JSON 

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

 1.5 JSON 语法

注 ： JSON 语法是JavaScript 语法的子集。

1.5.1 JSON 语法规则 

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

  1）名称 / 值对

  • 书写规则 ："name" = "竹林学者"
  • 上述语句等价于 JavaScript 语句 ： name = "JavaScript"

  2）值类型 ：

  •     数字（整数或浮点数）
  •     字符串 
  •     逻辑值
  •     数组
  •     对象
  •      null

3） 数字 

  •    整型或浮点型  例如 ： { "age" : 30 }

4）对象

JSON对象在大括号（{}）中书写 ：

  • 对象可以包含多个名称 / 值对
  • {“name” : "竹林学者", "url" = "www.zhulinxuezhe.cn"} 
  • 上述语句等价于 JavaScript 语句  name = “竹林学者”     url = "www.zhulinxuezhe.cn"

5）数组 

  数组在中括号[] 中书写 ，数组可以包含多个对象 （下边sites 是包含三个对象的数组，，每个对象代表一条关于某个网站的记录）

{

 "sites" : [

{ "name" : "竹林学者", "url" : "www.zhulinxuezhe.cn" },

{ "name" : "Google" , "url" : "www.google.com" },

{“name” : "百度" , "url" : “www.baidu.com”}

]

}

 6）布尔值

  • { "flag" : true}

7) null

  • JSON可以设置null 值 ：
  • { "zhulinxuezhe" : null} 

 1.6 JSON 使用JavaScript 语法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>第一个网站名称: <span id="name1"></span></p> 
<p>第一个网站修改后的名称: <span id="name2"></span></p> 

<script>
var sites = [
	{ "name":"竹林学者" , "url":"www.zhulinxuezhe.cn" }, 
	{ "name":"google" , "url":"www.google.com" }, 
	{ "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
// 修改网站名称
sites[0].name="竹林商学院";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>
</html>

运行结果 ：

1.8 JSON 文件

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

 1.7 JSON 对象

1.7.1 实例 : 

{ "name" : "zhulinxuezhe" , "alexa" : "10000" , "site" : null}

  • JSON 对象使用在大括号 {} 中书写
  • 对象可以包含多个 key/value （键/值）对
  • key 必须是字符串 ， value 可以是合法的JSON 数据类型 （字符串，数字。对象，数组，布尔值，null）
  • key 和 value 使用 冒号 （：）分割
  • 每个 key/value 对 使用逗号（，）分割

1.7.2 如何访问对象值

可以使用(.) 来访问对象的值 ：

var myObj , x;

myObj = { "name" : "zhulinxuezhe" , "alexa" : "10000" , "site" :  null};

x = myObj.name;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

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

<script>

var myObj, x;
myObj = { "name":"zhulinxuezhe", "alexa":10000, "site":null };
x = myObj.name;

/*
 也可以通过这样来访问对象的值
 x = myObj["name"]; 

  */

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

 结果 :

1.7.3 循环对象 ：

 1）使用 for - in 来循环对象的属性 ：

RUNOOB.COM
 
zhulinxuezhe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>
​
<p>使用 for-in 来循环对象的属性:</p>
​
<p id="demo"></p>
​
<script>
var myObj = { "name":"zhulinxuezhe", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
​
</body>
</html>

结果 ：

 2）在for-in 循环对象的属性时，使用中括号（[]）来访问属性的值 ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<p>在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：</p>

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

<script>
var myObj = { "name":"zhulinxuezhe", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>

</body>
</html>

结果 ：

1.7.4 嵌套 JSON 对象 

JSON 对象中可以包含另一个 JSON 对象 ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<p>访问 JSON 内嵌对象。</p>

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

<script>
myObj = {
	"name":"zhulinxuezhe",
	"alexa":10000,
	"sites": {
		"site1":"www.zhulinxuezhe.cn",
		"site2":"m.zhulinxuezhe.cn",
		"site3":"n.zhulinxuezhe.cn"
	}
}
document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site1"];
</script>

</body>
</html>

结果 :

1.7.5 修改删除值 

  • myObj.sites.site1 = "www.google.com"; 或者   myObj.sites["site1"] = "www.google.com";
  • delete myObj.sites.site1;     或者   delete myObj.sites["site1"]

1.8 JSON 数组 ：

  • JSON 数组在中括号中书写
  • 数组中值必须是合法的数据类型，（字符串、数字、对象、数组、布尔值、null）
  • JavaScript中，数组值可以是以上的 JSON 数据类型，也可以是JavaScript 表达式，包括 函数，日期，及 undefined

 1）三种形式访问 数组

  • 通过索引值访问数组
  • 通过 for-in 访问数组
  • 通过 for 循环访问数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<p>访问 JSON 对象数组值。</p>

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

<script>

var myObj, x;
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "zhulinxuezhe", "Taobao" ]
}
/* 使用索引来访问数组 */
x = myObj.sites[0];

/*
 使用 for-in 来访问数组
for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

*/

/* 使用for循环访问数组 
for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}
*/
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

2）嵌套JSON 对象中的数组

通过采用for-in 来循环访问每个数组，外层嵌套内层。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<p>循环内嵌数组：</p>

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

<script>

var myObj, i, j, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"zhulinxuezhe", "info":[ "竹林学者", "竹林官方", "竹林公众号" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

3）修改，删除数组元素

  • myObj.sites[1]  = "github";
  • delete myObj.sites[1];

1.9 JSON.parse()

  • JSON 通常用于与服务端交换数据
  • 在接收服务端数据时一般是字符串
  • 通过使用JSON.parse() 方法将数据转换为 JavaScript 对象

 1.9.1 语法格式 

JSON.parse(text[,reviver])

  • text : 必须 ，一个有效的 JSON 字符串
  • reviver ： 可选， 一个转换结果的函数，将为对象的每个成员调用此函数。

 1.9.2 实例展示 ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<h2>从 JSON 对象中创建 JavaScript 对象</h2>

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

<script>
var obj = JSON.parse('{ "name":"zhulin", "alexa":10000, "site":"www.zhulinxuezhe.cn" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

</body>
</html>

1.9.3 从服务端接受 JSON  数据

我们使用AJAX 从服务器请求JSON 数据，并接解析为 JavaScript 对象。

实例代码 ： 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

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

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

/* 解析从服务端接收的JSON 数据 */
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

1.9.4  异常  （JSON.parse(text)） 或者 （JSON.                      stringfy(text)）此处 parse 和 stringfy使用一致

JSON 不能存储Data 对象 /函数 ，如果要存储Data 对象 /函数，则需要将其转换为字符串，之后在转为 Data 对象 /函数。

Data ：

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

函数 ：（不建议使用）

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

1.10 JSON.stringify() 

JSON 通常用于与服务端交换数据，而在向服务端发送数据时一般是字符串，可以通过JSON.stringfy() 方法将 JavaScript 对象转换为字符串。

 语法 格式 ：

JSON.stringfy( value [ , replacer [ , space ] ] )

 参数说明 ：

 value ： 必须 ，需要转换的JavaScript 值 （通常为对象或数组）

replacer ：可选，用于转换结果的函数或数组，

space ： 可选，文本添加缩进、空格和换行符。

1.10.1 JavaScript 对象转换  

代码实例 ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

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

<script>

var obj = { "name":"zhulinxuezhe", "alexa":10000, "site":"www.runoob.com"};

/* 将数据转换为字符串 */
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

1.10.2 JavaScript 数组转换

 var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

 1.11 JSON 使用 

JSON 最常见的用法 之一 ，就是从web 服务器 读取JSON 数据，（作为文本或作为 HttpRequest），将JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竹林学者</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
网站名: <span id="name"></span><br> 
网站地址: <span id="url"></span><br> 
</p> 
<script>
var txt = '{ "sites" : [' +
'{ "name":"竹林学者" , "url":"www.zhulinxuezhe.cn" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url 
</script>
</body>
</html>

通过 JavaScript 的 eval() 函数，将JSON 文本转换为JavaScript 对象，但是 必须将文本包围在括号中，避免语法错误。

 

Janson666
关注
专栏目录
JSON学习笔记
03-17
这篇"JSON学习笔记"可能涵盖了以下几个关键知识点： 1. JSON的基本结构：JSON数据由键值对（key-value pairs）组成，键和值之间用冒号隔开，键值对之间用逗号分隔。键必须是字符串，而值可以是字符串、数字、布尔值...
JSON学习笔记第1/2页
10-30
### JSON学习笔记 #### JSON与XML的对比 随着互联网技术的发展，数据交换成为了现代软件开发中的重要环节之一。为了满足不同场景下的需求，多种数据交换格式应运而生，其中最为人熟知的就是XML（可扩展标记语言）...
JsonBody的使用
heymysweetheart的专栏
06-18 4660
@Controller @RequestMapping("/house/rent") public class RentInfoController { @Resource RentInfoService rentInfoService; Logger logger = LoggerFactory.getLogger(RentInfoController.class);
通过response.body()返回的json报文，直接生成对应结构体，实现数据绑定
你的问题在于，读书太少而想得太多。
04-22 1912
通过response.body()返回的json报文实例，直接生成对应Go struct！方便又高效！一起来看一看吧！
loadrunn 测试json body接口
lychbeyond的专栏
05-13 1020
web_custom_request("request",//随便写个名字 "Method=POST",//请求的方法 "URL=http://10.60.0.13:8002/json/getUserAccounts",//请求地址 "RecContentType=application/json",//指定响应头的Content-Type，这里是JSON "EncType=applica
一个注解搞定 JsonBody 请求
郡主~~~~
10-24 1171
缓存 JsonBody, 实现重复获取。过滤器封装 JsonBody 请求。
JSON数据学习笔记
qq_43867812的博客
03-23 580
使用JSONObject解析JSON数据，这是Android中最基本的数据解析方式。谷歌官方提供的解析json数据的方法。注意：因为""有申明字符串的意思我们初始化的是一个String字符串,所以在对象中需要。嵌套的数据通过上述方法赋值给一个 实体类，在实体类里面获取对应的变量值。下面的例子是对象city是包含四个对象的数组。​ 使用 Gson 获取 Json 中的数据。JSON 对象：JSON 对象在大括号。JSON 数组：JSON 数组在中括号。下面就是一个json对象。中书写，数组可包含多个对象。
Json学习笔记
03-22
### JSON学习笔记：深入了解JSON与Spring框架中的初始化机制 #### JSON简介 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以其简洁性和易读性而著称，不仅适用于人眼阅读，也便于机器解析和...
json学习笔记、jackson的jar包
10-15
在这个“json学习笔记、jackson的jar包”中，我们可以深入探讨JSON和Jackson的相关知识点。 1. JSON基本概念： - JSON是一种文本格式，易于人阅读和编写，同时也易于机器解析和生成。 - JSON数据结构主要由对象...
JSON 入门笔记
kzzhr
05-14 873
对象元素 obj = {"name":"Jom"}; document.writeln(obj.name);数组 obj = ["name","Jom"]; document.writeln(obj);对象数组 obj = [{"name":"Jom"}]; document.writeln(obj[0].name); 与字符串转换 txt = "{\"name\":\"Jank\"
[Javaweb]JSON
十八岁讨厌编程的博客
07-08 1161
JSON: JavaScript Object Notation（JavaScript 对象标记法）。JSON 是一种存储和交换数据的语法。JSON 是一种轻量级的数据交换格式JSON 是通过 JavaScript 对象标记法书写的文本。JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。文本可被任何编程语言作为数据来读取和使用。JSON 格式最初由 Douglas Crockford 提出。如下是 对象的定义格式： 接下来我们再看看 的格式： 通过上面 js 对象格式和 jso
（笔记）使用Postman发送一个JSON格式的Body
u011046452的博客
07-15 4327
在这里选择JSON格式就可以了
request获取body的json数据
常年被追砍的博客
05-11 7091
在request中可以获取到来自Http请求的body数据， 比如获取json格式数据 代码： import com.alibaba.dubbo.common.utils.IOUtils; BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStrea...
request模块做post请求时,body为json格式,并且带有中文,如何请求
weixin_30719711的博客
05-05 2473
后台接口只能解析json,并且一定要是中文才能解析出来,如果是unicode编码的中文则会报错 看requests的源码.以下为解决方法: #将requests库中的models.py文件中的第461行: body = complexjson.dumps(json) #修改为: body = complexjson.dumps(js...
jsonl是什么
最新发布
05-31
JSONL是JSON Lines的缩写，全称为JSON Lines text format。JSONL是一种文本格式，用于将一个大型的JSON文档拆分成多个小的JSON文档。每个小的JSON文档独立占据一行文本，因此也被称为“Line-Delimited JSON”。JSONL格式可以用于处理大型的JSON数据集，例如日志文件、数据库导出等。 JSONL格式与标准的JSON格式类似，但是每个JSON对象必须占据一行，行末不能有逗号，也不能有数组或对象的起止符（[ ] 和 { }）。例如，一个包含两个JSON对象的JSONL文件可能如下所示： ``` {"name": "Alice", "age": 25} {"name": "Bob", "age": 30} ``` 使用JSONL格式有以下优点： - 可以逐行读取和处理JSON数据，不需要一次性加载整个JSON文档到内存中。 - 可以方便地对JSON数据进行切分和合并，不需要解析整个JSON文档。 - 可以减少网络传输的数据量，特别是在处理大型JSON数据集时。 需要注意的是，JSONL格式并不是标准的JSON格式，因此在使用JSONL格式时需要使用特定的工具或库来解析和生成JSONL数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Janson666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值