JavaScript学习笔记（JSON）

最新推荐文章于 2023-11-24 16:57:42 发布

少不入川。

最新推荐文章于 2023-11-24 16:57:42 发布

阅读量1.7k

点赞数 5

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

本文链接：https://blog.csdn.net/qq_52002412/article/details/123823856

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.前言

1.1 JSON概念

JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）。

JSON主要的作用：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A和B交换数据的话都是采用JSON）

1.2 JSON特点

JSON是一种标准的轻量级的数据交换格式，其特点再：体积小、易解析。

1.3 关于XML

这里先提一嘴XML和HTML：这两个语言都来自一个”父亲“：SGML（标准通用的标记语言。）

HTML主要做页面展示，所以语法松散。

XML主要做数据存储和数据描述，所以语法相当严格。

XML体积较大，解析麻烦，但是其优点在于语法严格（通常银行相关的系统之间在进行数据交换时会使用XML）

1.4 语法格式

var jsonObj = {
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	....
};

2.JSON

2.1 JSON对象的创建与使用

// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj = {
	"sno" : "110",
	"sname" : "张三",
	"sex" : "男"
};
			
// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
			
			
// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){
	this.sno = sno;
	this.sname = sname;
	this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);
			
// JSON数组
var students = [
	{"sno":"110","sname":"张三","sex":"男"},
	{"sno":"120","sname":"李四","sex":"男"},
	{"sno":"130","sname":"王五","sex":"男"}
];
//要注意[]和{}的区别
//在JS当中：[]和{}
//	[] 是数组。
//	{} 是JSON。

2.2 更加复杂的JSON对象

/*
请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
*/
var jsonData = {
	"total" : 3,
	"students" : [
		{"name":"zhangsan","birth":"1980-10-20"},
		{"name":"lisi","birth":"1981-10-20"},
		{"name":"wangwu","birth":"1982-10-20"}
	]
};

2.3 eval函数与JSON

eval函数的作用是：将字符串当做一段JS代码解释并执行。

// java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
// 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
// 可以使用eval函数,将json格式的字符串转换成json对象.
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
// 将以上的json格式的字符串转换成json对象
 window.eval("var jsonObj = " + fromJava);
// 访问json对象
alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.

3.实例：将Java查询数据库返回的json字符串显示在网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
			// 有这些json数据
			var data = {
				"total" : 4,
				"emps" : [
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7361,"ename":"SMITH2","sal":1800.0},
					{"empno":7360,"ename":"SMITH3","sal":2800.0},
					{"empno":7362,"ename":"SMITH4","sal":3800.0}
				]
			};
			// 希望把数据展示到table当中.
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					var html = "";
					for(var i = 0; i < emps.length; i++){
						var emp = emps[i];
						html += "<tr>";
						html += "<td>"+emp.empno+"</td>";
						html += "<td>"+emp.ename+"</td>";
						html += "<td>"+emp.sal+"</td>";
						html += "</tr>";
					}
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
				}
			}
            
		</script>
		<input type="button" value="显示员工信息列表" id="displayBtn" />
		<h2>员工信息列表</h2>
		<hr>
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工名字</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">

			</tbody>
		</table>
		总共<span id="count">0</span>条数
	</body>
</html>

少不入川。

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记（JSON）

1.前言1.1 JSON概念JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）。JSON主要的作用：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A和B交换数据的话都是采用JSON）1.2 JSON特点JSON是一种标准的轻量级的数据交换格式，其特点再：体积小、易解析。1.3 关于XML这里先提一嘴XML和HTML：这两个语言都来自一个”父亲“：SGML（标准通用的标记语言。）HTML主要做页面展示，所以语法松散
复制链接

扫一扫