JavaScript原生读取json文件

最新推荐文章于 2025-05-23 14:51:24 发布

原创最新推荐文章于 2025-05-23 14:51:24 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #前端

本文介绍了如何在没有服务器和Ajax知识的情况下，利用HTML5的script标签来读取本地的JSON文件。通过创建script元素并设置src属性为JSON文件路径，可以避免跨域问题。然后在文档加载完成后，解析并显示JSON数据。这种方法适用于简单的数据交互场景，且要求JSON数据以JavaScript对象形式存在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在日常写代码时，经常能遇到读取本地或服务器的json文件，如果你是菜鸟，不会复杂地配置服务器，也不懂得Ajax技术，我建议你用以下方式。

我们都知道，js用Ajax读取文件会涉及到跨域问题，如果你没有服务器，我劝你别弄了。在H5中，有a img audio script link 等标签不涉及跨域，我们今天就用script读取“json”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>读取json</title>
		<script>
		var scr=document.createElement("script");
		scr.src="1.json"
		document.head.appendChild(scr);
		</script>
	</head>
	<body>
		<script>
			document.body.onload=function(){
			document.body.innerText=index.tit+" "+index.name+" "+index.age;
			}
		</script>
	</body>
</html>

1.json文件

var index={
tit:"hello",
name:"world",
age:"daniu",
url:""
}

说实话，其实这和外部引用js文件没啥区别

注意：

1.必须按照本文代码顺序，一定不能在body中创建script标签

2.如果是直接显示的文字，必须用document.body.οnlοad=function(){} 防止没加载到文件报错的问题。

3.json文件需要写成js对象或json形式