JS使用本地json文件

最新推荐文章于 2025-09-30 21:42:01 发布

原创最新推荐文章于 2025-09-30 21:42:01 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #javascript #html5

笔记同时被 3 个专栏收录

33 篇文章

订阅专栏

JavaScript

30 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍了一种在JavaScript中调用本地JSON文件的方法，由于直接调用会被系统拒绝，因此采取通过Node.js建立路由托管文件的方式。这种方式虽然增加了额外步骤，但能模拟服务器数据交互。文中提到了HTML、Ajax以及Node.js（app路由）在实现中的应用，并表达了对于更简便方法的探索愿望。

1.json文件
2.怎么调用本地json文件
3.总结

前言：
有这个需求是因为我需要使用本地的json文件来做仪表盘，
搜寻了一圈下来后。
发现直接调用本地的json文件会遭系统拒绝，
那么就只能建立路由，托管文件了，这样就可以调用了。

但是这样多了一个开路由的过程，体验稍微弱一些，但是却可以模拟接服务器的过程。

在这里插入图片描述

图里可能有些不太好理解，
简而言之就是要通过路由托管文件夹

html：

		<script type="text/javascript">
			function readTextFile(file, callback) {
			    var rawFile = new XMLHttpRequest();
			    rawFile.overrideMimeType("application/json");
			    rawFile.open("GET", file, true);
			    rawFile.onreadystatechange = function() {
			        if (rawFile.readyState === 4 && rawFile.status == "200") {
			            callback(rawFile.responseText);
			        }
			    }
			    rawFile.send(null);}//usage:
				var data; 
				readTextFile("http://127.0.0.1:8888/test.json", function(text){
			    data=JSON.parse(text);
			    //console.log(data);
				console.log(data[30].mobile,data[30].email);				
				});
			</script>

app路由nodejs

let express=require("express");
let path=require("path");
let bodyparser=require("body-parser");
//创建路由
let app=express();

app.use(bodyparser.urlencoded());

//设置端口
app.listen(8888);
//创建公共路由
app.use(express.static("public"));//托管文件夹