使用js读取 .json、.txt等文件里面的数据

最新推荐文章于 2024-06-01 10:30:43 发布

旧城不暖少年

最新推荐文章于 2024-06-01 10:30:43 发布

阅读量2.6k

点赞数 18

分类专栏：分享记录文章标签： javascript json html5 jquery

本文链接：https://blog.csdn.net/m0_46367578/article/details/121591267

版权

分享同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

记录

2 篇文章 0 订阅

订阅专栏

1.什么是json？它有那些优势？

JSON 指的是JavaScript对象表示法(全称为 JavaScript Object Notaion)。
JSON 是一种轻量级的文本数据交换格式。
JSON 是一种独立语言。JSON 通常使用JavaScirpt语法来描述对象，但是JSON 仍然独立于语言和平台。
JSON 具有自我描述性，更易于理解。

2.怎么在HTML使用JSON来读取数据？

student.json文件规范：

{
	"student":[
		{
			"No":"20190801",
			"Name":"张三",
			"Age":"21"
		},
		{
			"No":"20190802",
			"Name":"李四",
			"Age":"19"
		},
		{
			"No":"20190803",
			"Name":"王麻子",
			"Age":"33"
		},
		{
			"No":"20190804",
			"Name":"赵六",
			"Age":"23"
		}
	]
}

这是JSON文件通用格式，下面我们展示如何使用过js读取文件数据。

<body>
	<div id="app" class="container"></div>
	<script>
		//创建XMLHttpRequest对象
		var xmlhttp=new XMLHttpRequest();
		//onreadystatechange属性定义当前readyState发生变化时执行的函数
		//readyState属性表示当前XMLHttpRequest的状态
		//status属性表示了当前XMLHttpRequest对象的状态
		xmlhttp.onreadystatechange=function(){
			if(this.readyState==4&&this.status==200){
				//JSON.parse() 方法将数据转换成 JavaScript对象
				//有的时候我们还会用到JSON.stringify() 方法，这个方法的作用是将JavaScript对象转换成字符串 
				var myArr=JSON.parse(this.responseText);
				//有的同学可能不理解下面的  `` （反引号）这是es6语法的特性，大家感兴趣的话可以去了解。
				var html=`<table class="table table-bordered table-hover table-condensed">
						<head>
							<tr>
								<th>学号</th>
								<th>姓名</th>
								<th>年龄</th>
							</tr>
						</head>
						<tbody>`;
				//主要这里遍历一定要是myArr的student对象。
				//因为myArr这个对象中还有许多的对象，所以我们在使用的时候需要指明是哪一个对象
				for (var i = 0; i < myArr.student.length; i++) {
					html=html+`
							<tr>
								<td>`+myArr.student[i].No+`</td>
								<td>`+myArr.student[i].Name+`</td>
								<td>`+myArr.student[i].Age+`</td>
							</tr>`;
				}
				html=html+`</tbody></table>`;
				document.getElementById('app').innerHTML=html;
			}
		}
		//open(method, url, async, user, psw)  规定请求
		/*
			method：请求类型 GET 或 POST
			url：文件位置
			async：true（异步）或 false（同步）
			user：可选的用户名称
			psw：可选的密码
		*/
		xmlhttp.open("GET","../json/student.json",true);
		//send() 将请求发送到服务器
		xmlhttp.send();
	</script>
</body>

注意
1.使用之前必须要导入jquery文件
2.对xmlhttp.onreadystatechange()想要深入了解，可以点击这里。
3.在读取JSON里面的数据时，myArr.student[i].Age中的Age必须和JSON中定义的字符一样，不然显示的是undefined
4.此方法不仅仅局限于JSON文件，可以尝试将student.json的后缀名改成.txt文件后缀名，也是可以读取出数据的。

旧城不暖少年

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
使用js读取 .json、.txt等文件里面的数据

1.什么是json？它有那些优势？JSON 指的是JavaScript对象表示法(全称为 JavaScript Object Notaion)。JSON 是一种轻量级的文本数据交换格式。JSON 是一种独立语言。JSON 通常使用JavaScirpt语法来描述对象，但是JSON 仍然独立于语言和平台。JSON 具有自我描述性，更易于理解。2.怎么在HTML使用JSON来读取数据？student.json文件规范：{ "student":[ { "No":"20190801",
复制链接

扫一扫