JS文件如何引入本地JSON文件？

海洋之蓝

268170236

发布于
2023-09-27 安徽

更新于
2023-09-27

一个JS文件想使用本地一个JSON文件中的数据
百度了下，发现不能直接去读取这个JSON文件。可以通过JQUERY的一个方法或者new XMLHttpRequest();这样来获取到JSON文件中的内容，不知道还有没有其他更简洁的方法？

https://segmentfault.com/a/1190000038275195

javascript

阅读 3.3k

AI BotBETA

当然，引入本地JSON文件到JS文件中有多种方法，但大部分浏览器出于安全考虑不允许直接读取本地文件。以下是你提到的两种常见方法：

使用JQuery的 $.ajax() 或 $.getJSON() 方法：

$.getJSON('yourfile.json', function(data) {
    // 在这里使用你的数据
    console.log(data);
});

或者使用 $.ajax()：

$.ajax({
    url: 'yourfile.json',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
        // 在这里使用你的数据
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 处理错误
        console.error(textStatus, errorThrown);
    }
});

使用 XMLHttpRequest 或 fetch：

使用 XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open("GET", 'yourfile.json', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200)
    // 在这里使用你的数据，需要通过 `xhr.responseText` 获取 JSON 字符串，然后通过 `JSON.parse(xhr.responseText)` 转换为对象
    console.log(JSON.parse(xhr.responseText));
}
xhr.send();

或者使用现代的 fetch API：

fetch('yourfile.json')
.then(response => response.json())
.then(data => {
    // 在这里使用你的数据
    console.log(data);
})
.catch(error => console.error(error));

这些都是常用的方法，但需要注意的是，由于浏览器的同源策略和跨域资源共享 (CORS) 限制，你可能无法直接从本地文件系统读取文件。如果你在本地运行这些代码（例如，通过启动一个本地服务器），你可能会遇到跨域问题。在这种情况下，你可能需要将你的 JSON 文件托管在一个服务器上，然后通过该服务器的URL来访问它。

3 个回答

得票最新

陟上晴明

21.1k124691

发布于
2023-09-28 浙江

不是很清楚你说的这个本地文件是指什么情况，是客户端的文件，还是服务端的文件。

如果是客户端的文件的话，就是让用户点击上传按钮去上传对应的JSON文件了。
如果是服务端的文件的话，可以直接在页面中使用 <script> 标签引入(JSONP)，也可以使用 require/import 的文件直接包含这个JSON文件（require 需要通过Node构建，浏览器不支持），如果是一个非常大的JSON文件，你想要动态导入的，可以参考动态import的文档，当然也可以使用发起一个HTTP请求来获取。

你也想起舞吗

431

发布于
2023-09-28 山东

你可以把json文件改成js文件，赋值给个变量，用script引入

xiaofei

8451214

发布于
2023-09-28 陕西

你可能需要的是这种

<script type="module">
  import data from './data.json' assert { type: 'json' }
</script>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

JS文件如何引入本地JSON文件？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？