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 个回答

得票最新