json 笔记

最新推荐文章于 2021-04-07 19:43:28 发布
最新推荐文章于 2021-04-07 19:43:28 发布
阅读量272 收藏
点赞数
文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45468845/article/details/106771693
版权

JSON简介

之前一直以为JSON只是一种文件格式，了解了才发现并不是。

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

json格式化工具

语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

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

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

JSON 值

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在中括号中）
  • 对象（在大括号中）
  • null
{ 
	{ "age":30 },//json的值可以是数字
	{ "name":"菜鸟教程" , "url":"www.runoob.com" },//JSON 对象在大括号（{}）中书写，可以包含多个名称/值对：
	"sites": [
		{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
		{ "name":"google" , "url":"www.google.com" }, 
		{ "name":"微博" , "url":"www.weibo.com" }
	],//JSON数组，在[]中书写

	"flag":true,//布尔值
	"runoob":null,//null
}

JavaScript中：
访问值：
sites.[0].name => ‘runoob’
修改值:
sites.[0].name =“jack”

json在javascript中的应用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
    "name":"菜鸟教程",
    "url":"www.runoob.com", 
    "slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
 
</body>
</html>

JSON与XML

json总是被拿来与xml比较，

异

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

同

  • JSON 是纯文本

  • JSON 具有"自我描述性"（人类可读）

  • JSON 具有层级结构（值中存在值）

  • JSON 可通过 JavaScript 进行解析

  • JSON 数据可使用 AJAX 进行传输
    最大的不同：
    最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

  • JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。

  • JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

JSON对象

  • JSON 对象使用在大括号 { } 中书写。

  • 对象可以包含多个 key/value（键/值）对。

  • key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

  • key 和 value 中使用冒号(:)分割。

  • 每个 key/value 对使用逗号(,)分割。

访问对象值

可以通过点号 . 或中括号[ ] 来访问对象的值：

var myObj, x, y;
myObj = { "name":"yx", "age":18, "zhangxiang":"shuaiqi" };
x = myObj.name;
y = myObj["name"];

循环访问：
可以通过foreach循环对象的属性
使用中括号（[]）来访问属性的值：

<body>
	<p>使用 for-in 来循环对象的属性:</p>
	<p id="demo"></p>	
	<script>
	myObj = { "name":"yx", "age":18, "zhangxiang":"shuaiqi" };
	for (x in myObj) {
	    document.getElementById("demo").innerHTML += x + "<br>";
	    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
	}
	</script>
</body>

在这里插入图片描述

嵌套JSON对象

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

myObj = {
    "name":"jack",
    "age":18,
    "others": {
        "sex":"man",
        "scrod":"good"
    }
}

访问嵌套对象：

var x = myObj.others.scord;

var x = myObj.others["scord"];

修改嵌套对象的值：

myObj.others.scord = "......";

myObj.others["scord"] = "......";

删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.others.scord;

delete myObj.others["scord"];

JSON数组

JSON 数组在中括号中书写。

[ "jack", "tom", "rose" ]

对象属性的值可以是一个数组：

{
"class":"person",
"num":3,
"name":[ "jack", "tom", "rose" ]
}

访问：

x = myObj.name[0];//jack

循环数组

foreach：

<script>

var myObj, i, x = "";
myObj = {
	"class":"person",
	"num":3,
	"name":[ "jack", "tom", "rose" ]
};

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

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

</script>

在这里插入图片描述
for循环

<script>

var myObj, i, x = "";
myObj = {
	"class":"person",
	"num":3,
	"name":[ "jack", "tom", "rose" ]
};

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

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

</script>

在这里插入图片描述

嵌套JSON对象中的数组

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

循环访问：

<p id="demo"></p>
......
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;

修改和删除

通过索引来修改数组值

myObj.sites[1] = "Github";

通过delete删除数组元素

delete myObj.sites[1];

删除数值的元素，数组的大小不变，代码如下：

	var myObj, i, x = "";
	myObj = {
	    "name":"网站",
	    "num":3,
	    "sites":[ "Google", "Runoob", "Taobao" ]
	};
	delete myObj.sites[1];
	
	x = "sites.length = " + myObj.sites.length + "<br><br>";
	    
	for (i in myObj.sites) {
	    x += i + " " + myObj.sites[i] + "<br>";
	}

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

delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

JSON.parse()

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

JSON.parse(text[, reviver])
  • text:必需， 一个有效的 JSON 字符串。
  • reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

案例：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析前要确保数据即text是标准的 JSON 格式，否则会解析出错。

从服务端接受json数据

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

<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) {
		        myObj = JSON.parse(this.responseText);
		        document.getElementById("demo").innerHTML = myObj.name;
		    }
		};
		xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
		xmlhttp.send();
	
	</script>

</body>

从服务端接受数组的json数据

如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

<body>
​
	<p id="demo"></p>
	​
	<script>
	​
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
		    if (this.readyState == 4 && this.status == 200) {
		        myArr = JSON.parse(this.responseText);
		        document.getElementById("demo").innerHTML = myArr[1];
		    }
		};
		xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
		xmlhttp.send();
	​
	</script>
​
</body>

传递Date对象

JSON 不能存储 Date 对象。
如果你需要存储 Date 对象，需要将其转换为字符串。
之后再将字符串转换为 Date 对象。

<body>
	<p id="demo"></p>
	<script>
		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;

	</script>
</body>

通过reviver将结果转换

<body>
	<p id="demo"></p>
	<script>
		var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
		var obj = JSON.parse(text, function (key, value) {
		    if (key == "initDate") {
		        return new Date(value);
		    } else {
		        return value;
		}});
		document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;
	</script>
</body>

JSON.stringify()

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

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

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

  • replacer:可选。用于转换结果的函数或数组。
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。
    使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

  • space:可选，文本添加缩进、空格和换行符，
    如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，
    如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

案例：

<body>
	<p id="demo"></p>
	<script>
		var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
		var myJSON = JSON.stringify(obj);
		document.getElementById("demo").innerHTML = myJSON;	
	</script>

</body>

JavaScript 数组转换

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

日期转换

JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。

<p id="demo"></p>
<script>
	var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
	var myJSON = JSON.stringify(obj);
	document.getElementById("demo").innerHTML = myJSON;
</script>

在这里插入图片描述

JSON使用

把 JSON 文本转换为 JavaScript 对象

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

为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

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

案例：

<body>

	<p>
	网站名: <span id="name"></span><br> 
	网站地址: <span id="url"></span><br> 
	</p> 
	<script>
		var txt = '{ "sites" : [' +
		'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
		'{ "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>

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

本文主要内容来自：https://www.runoob.com/json/json-tutorial.html

风吹我亦散
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSON学习笔记
qq_69080551的博客
08-17 141
JavaScriptObject Notation, JS对象简谱）是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON笔记
u013815649的博客
12-16 412
JSON（JavaScript Object Notation）JavaScript对象表示法 是一种轻量级的数据交换格式，它是基于ECMAScript的一个子集。 json简单说就是通过对象和数组两种结构来表示各种复杂的结构。 举个栗子（w3school上的）： var people = { "employees":[ {"firstName":"Bill", "l
Ajax&Json笔记
03-28
Ajax&Json笔记,非常适合新手入门学习
XML&JSON笔记.docx
09-15
XML&JSON笔记.docx
java JSON笔记
03-22
浏览器开发文档 博文链接：https://chenxiuheng.iteye.com/blog/1007607
json笔记 详细注释
09-12
json_笔记
Json学习笔记
03-22
Json学习笔记，你的必选哦，与大家共享，一起进步
json笔记
风雨小树林的博客
04-07 82
json格式 一、json格式 1、在java中创建json格式字符串写法 String json = "{\"status\":true, \"message\":"登陆成功"}"; 2、json格式对象 {"name":"花生","age":3,"sex":"母"} 3、json格式数组(集合) [ "user1":{"name":"花生1","age":3,"sex":"母"}, "user2":{"name":"花生2","age":3,"sex":"母"} ] 二、jackson.
Json笔记
Hyo_yew的博客
03-29 354
json格式的引入：一种轻量级的数据交换格式JSON：JavaScript 对象表示法（JavaScript Object Notation）。JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式...
JSON
qq_48359993的博客
01-28 85
一、什么是JSON？ JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。 JSON就是一串字符串 只不过元素会使用特定的符号标注。 {} 双括号表示对象 [] 中括号表示数组 “” 双引号内是属性或值 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象) 所以 {“name”: “Michael”} 可以理解为是一个包含name为Michael的对象 而[{“name”: “Michael”},{“
microPython学习笔记5 json的解析
最新发布
03-10
关于 microPython 学习笔记5 中 json 的解析问题，我可以回答您的问题。在 microPython 中，可以使用 ujson 模块来解析 json 数据。具体的使用方法可以参考相关的文档和教程。希望我的回答能够帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值