JavaScript||JSON应用

最新推荐文章于 2023-11-20 21:35:13 发布

月亮不休我不眠

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量99

点赞数

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

本文链接：https://blog.csdn.net/qq_43543920/article/details/105553888

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

什么是JSON?

JSON是一种轻量级的数据交换格式，用来进行数据交换。是目前流行的数据交换格式之一（其他主流数据交换格式：XML、WAML）。
JSON在JavaScript中是作为无类型对象存在的，是基于JavaScript的一个子集。

JSON特点？

轻量级、易解析

JSON作用？

作为一种数据交换格式，顾名思义，JSON是用来进行跨平台/系统的数据交换的。
不同系统间（例如C语言系统和JAVA语言系统）一般是不能直接进行数据交换的，需要借助数据交换格式，间接进行数据交换。

例如，C语言内部有一组数据，想传给JavaScript：
1.在C语言内部先将数据转化成具有JSON格式的字符串，
2.将字符串通过浏览器传给JavaScript
3.JavaScript通过eval函数进行字符串拼接来构建JSON对象，从而得到数据

JSON语法格式

在JavaScript中，JSON是作为一个无类型对象存在的，下面给出其定义和调用方法：
1.定义
var 对象名 = {
“属性名” ：“属性值”，
“属性名” ：“属性值”，
“属性名” ：“属性值”，
…
}；
2.访问
（1）对象名.属性名
（2）对象名[“属性名”]
在这里插入图片描述

JSON应用：将数据在表格中显示

问题描述，假设浏览器收到一组数据,想将这些数据在HTML的表格中显示。（即图一变成图二）

图一：
在这里插入图片描述
图二：

下面是具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			
			//这是想加入表格的数据
			var information = {
				"sum":3,
				"students":[
				{"name":"zhangsan","age":"18","sex":"男"},
				{"name":"lilian","age":"23","sex":"女"},
				{"name":"wangwu","age":"21","sex":"男"},
				]
			};
			
			window.onload = function(){
				var btnid = document.getElementById("btn");
				btnid.onclick = function(){
					var html = "";
					for(var i = 0; i < information.students.length; i++)
					{
						
						var html = html +
						"<tr>" + 
						"<td>" + information.students[i].name + "</td>" +
						"<td>" + information.students[i].age + "</td>" +
						"<td>" + information.students[i].sex + "</td>" +
						"</tr>" 
					    
					}
					
					document.getElementById("body").innerHTML = html;
					document.getElementById("sum").innerText = information.sum;
			    }
			}
		</script>
	</head>
	<body>
		<table border="1px" width="40%" id="emptyTable">
			
			<input type="button" id="btn" value="显示学员信息" style="width: 150px; background-color: greenyellow;color: white;"/>
			<h3>学员信息列表</h3>
			<tr>
				<th >姓名</th>
				<th >年龄</th>
				<th >性别</th>
			</tr>
			<tbody id="body">
				<!--让里面有信息-->
			</tbody>
		</table>
		<p>一共有<span id="sum">0</span>条数据</p>
	</body>
</html>

月亮不休我不眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript||JSON应用

JSON应用什么是JSON?JSON是一种轻量级的数据交换格式，用来进行数据交换。是目前流行的数据交换格式之一（其他主流数据交换格式：XML、WAML）。JSON在JavaScript中是作为无类型对象存在的，是基于JavaScript的一个子集。JSON特点？轻量级、易解析JSON作用？作为一种数据交换格式，顾名思义，JSON是用来进行跨平台/系统的数据交换的。不同系统间（例如C...
复制链接

扫一扫

专栏目录