前端--JSON学习

最新推荐文章于 2024-05-09 00:12:44 发布

望山。

最新推荐文章于 2024-05-09 00:12:44 发布

阅读量611

点赞数 2

分类专栏：前端文章标签： json

本文链接：https://blog.csdn.net/weixin_53244569/article/details/119425419

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

- 一.JSON

一.JSON

1.概念

本质就是一个字符串,用来规定了服务器和浏览器之间数据交互的格式.
JSON是一个轻量级的数据交换格式.
格式: {“name”:“jack”,“age”:“18”}

2.作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

3.语法

JSON数据:

var a =' "firstName" : "John" '

JSON 对象:

var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 数组:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

转换工具
使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象转成JSON字符串 	JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象		JSON.parse("json字符串")

4. 测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js字符串</title>
	
		<script >
			
			//3.定义json数组
			var c ='[{"name":"jack","age":"28"},{"name":"沾上干","age":"38"},{"name":"小王","age":"18"}]';
			//4.把json字符串和js对象互转--JSON工具
			//4.1json字符串 转成js对象:::为了调用属性，函数方便
			var jsobj = JSON.parse(c);
			console.log(jsobj);
			console.log(jsobj[1].age);//获取对象身上的属性值
			console.log(jsobj[0].name);//获取对象身上的属性值
			//4.2js对象 转成 json字符串::: 为了对字符串进行操作，给服务器发送数据
			var json2 = JSON.stringify(jsobj);
			console.log(json2);
			console.log(json2.concat(123));
			
			console.log(c);
			console.log(c.concat(5));
			console.log(c.substr(5));//按照下标截取字符串
			
			//2.定义json对象
			var b = '{"name":"jack","age":"18"}';//是json字符串，用来交互数据的格式
			var b2 = {name:"jack",age:"18"};//是JS对象，封装了属性函数
			console.log(b);
			console.log(b.length);//获取长度
			console.log(b.concat(10000));//拼接字符串
		

			//1.定义json字符串 var a="属性名":"属性值";
			var a='"name":"张三"';
			console.log(a.length);//获取长度
			console.log(a.concat(123));//拼接字符串
			console.log(a.substr(3));//按照下标截取字符串
	
		</script>
	</head>
	<body>
	</body>
</html>

3.把HTML代码和JS代码分离

在这里插入图片描述

（1）创建js文件

			//3.定义json数组
			var c ='[{"name":"jack","age":"28"},{"name":"沾上干","age":"38"},{"name":"小王","age":"18"}]';
			//4.把json字符串和js对象互转--JSON工具
			//4.1json字符串 转成js对象:::为了调用属性，函数方便
			var jsobj = JSON.parse(c);
			console.log(jsobj);
			console.log(jsobj[1].age);//获取对象身上的属性值
			console.log(jsobj[0].name);//获取对象身上的属性值
			//4.2js对象 转成 json字符串::: 为了对字符串进行操作，给服务器发送数据
			var json2 = JSON.stringify(jsobj);
			console.log(json2);
			console.log(json2.concat(123));
			
			console.log(c);
			console.log(c.concat(5));
			console.log(c.substr(5));//按照下标截取字符串
			
			//2.定义json对象
			var b = '{"name":"jack","age":"18"}';//是json字符串，用来交互数据的格式
			var b2 = {name:"jack",age:"18"};//是JS对象，封装了属性函数
			console.log(b);
			console.log(b.length);//获取长度
			console.log(b.concat(10000));//拼接字符串
		

			//1.定义json字符串 var a="属性名":"属性值";
			var a='"name":"张三"';
			console.log(a.length);//获取长度
			console.log(a.concat(123));//拼接字符串
			console.log(a.substr(3));//按照下标截取字符串

（2）修改html文件,引入js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js字符串</title>
		<!-- 引入外部的js文件 -->
		<script src="01.js">
				
		</script>
	</head>
	<body>
	</body>
</html>

注：接前端–VUE学习

望山。

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端--JSON学习

文章目录一.JSON1.概念2.作用3.语法4. 测试3.把HTML代码和JS代码分离（1）创建js文件（2）修改html文件,引入js文件一.JSON1.概念本质就是一个字符串,用来规定了服务器和浏览器之间数据交互的格式.JSON是一个轻量级的数据交换格式.格式: {“name”:“jack”,“age”:“18”}2.作用JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象
复制链接

扫一扫