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

Question

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

https://segmentfault.com/a/1190000038275195

Answer 1

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

1. 使用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);    }});

2. 使用 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来访问它。