一、JS读取JSON文件数据
JavaScript是一种主要用于站点应用程序中的编程语言。JSON是一种格式，用于在服务器和Web应用程序之间传输数据。熟悉JavaScript的开发者知道，JSON可以轻松地与JavaScript一起使用。下面我们来看看如何使用纯JavaScript从JSON文件中获取数据。
fetch('data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
上述代码片段使用浏览器内置的fetch API从data.json文件中获取JSON数据。fetch API将返回一个解析后的数据流，其中我们使用在Promise对象上定义的then方法打印返回的结果。如果出现任何错误，包括404 Not Found或基于其它原因的无法解析的JSON，则调用catch方法。
二、JS读取JSON配置文件
JSON文件还可以用于存储应用程序的配置。我们可以将Web应用程序的重要配置保存为config.json文件，并在首次加载页面时使用JavaScript将这些配置加载到内存中。以下是一个示例：
fetch('config.json')
.then(response => response.json())
.then(config => {
window.appConfig = config;
startApp();
})
.catch(err => console.error(err));
上述代码片段首先从config.json文件获取JSON数据，然后将其存储在appConfig全局变量中。最后，我们可以调用startApp方法来使用配置开始应用程序。如果获取配置的过程中出现错误，则记录错误。
三、JS读取JSON文件的方法
在JavaScript中，我们可以从JSON文件中获取数据有多种方法。下面我们来介绍几种具有代表性的方法。
1. XMLHttpRequest对象
XMLHttpRequest对象是浏览器内置API之一。它允许JavaScript代码使用HTTP协议从Web服务器上获取数据。以下是一个使用XMLHttpRequest对象从data.json文件中获取数据的代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onload = () => console.log(xhr.response);
xhr.onerror = () => console.error(xhr.statusText);
xhr.send();
注意，在使用XMLHttpRequest对象时，我们需要手动处理回调函数（例如onload和onerror）。
2. jQuery AJAX方法
jQuery是一种著名的JavaScript库，提供了更易于使用的API，使我们可以从JSON文件中获取数据。
$.ajax({
url: 'data.json',
dataType: 'json',
success: data => console.log(data),
error: err => console.error(err)
});
3. 使用第三方库
除了jQuery之外，还有许多第三方JavaScript库可以从JSON文件中获取数据。例如，我们可以通过如下代码片段使用axios库：
axios.get('data.json').then(response => console.log(response.data));
四、JS读取本地JSON文件数据
从本地文件系统中读取JSON文件是一项常见任务。下面我们将介绍在Node.js和浏览器中如何执行此操作。
1. Node.js
在Node.js中，我们可以使用fs模块来读取本地JSON文件。以下是一个示例：
const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, 'data.json');
const data = fs.readFileSync(filePath);
console.log(JSON.parse(data));
注意，我们需要使用JSON.parse方法将读取的数据转换为可用的JavaScript对象。
2. 浏览器
在浏览器中，我们可以使用input元素将用户上传的JSON文件加载到内存中。以下是一个示例：
const input = document.getElementById('file-input');
input.addEventListener('change', event => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => console.log(JSON.parse(reader.result));
reader.readAsText(file);
});
在上面的示例中，我们定义了一个input元素，并使用它来允许用户从本地文件系统中选择文件。然后，我们使用FileReader对象将文件加载到内存中并使用JSON.parse方法将其转换为可用的JavaScript对象。
五、JS读取JSON文件生成图表
使用JavaScript和JSON文件，我们可以生成各种可视化效果。下面我们来看一个生成图表的示例。
fetch('data.json')
.then(response => response.json())
.then(data => {
const chart = new Highcharts.Chart('container', {
chart: {
type: 'column'
},
title: {
text: '数据表'
},
xAxis: {
categories: data.categories
},
yAxis: {
title: {
text: '值'
}
},
series: data.series
});
})
.catch(err => console.error(err));
在上面的示例中，我们使用Highcharts库创建一个新的图表。我们使用fetch API获取data.json文件中的数据，并使用该数据定义标题，x轴和y轴标签以及数据系列。最终，我们将生成的图表附加到HTML“container”元素中。
六、JS读取JSON文件内容
如需使用JavaScript读取JSON文件的内容，请使用如下代码：
fetch('data.json')
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));
在上面的代码中，我们使用response.text()方法而不是response.json()方法来读取JSON文件的内容。这将返回JSON数据的纯文本格式。
七、JS读取JSON文件跨域
在Web开发中，跨域是一种常见的限制。浏览器默认情况下不允许通过XMLHttpRequest对象访问来自不同域的数据。可以通过CORS（跨域资源共享）和JSONP（JSON with Padding）进行跨域访问。
1. CORS
使用CORS，服务器可以指定HTTP响应头allow-origin来授权某个域安全访问资源。以下是一个示例：
fetch('http://example.com/data.json', {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': 'http://localhost:3000'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
在上面的代码中，我们通过在请求中设置mode：'cors'来启用CORS。此外，我们还设置了Access-Control-Allow-Origin头，以授权http://localhost:3000域访问我们的data.json文件。如果服务器允许跨域访问，则fetch API将返回解析的JSON数据。
2. JSONP
JSONP是通过动态添加脚本元素到页面来实现的JSON跨域访问方式。我们可以在服务器上定义一个回调函数，并在JSON响应中返回该回调函数的调用。以下是一个JSONP数据请求示例：
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/data.json?callback=handleResponse';
document.body.appendChild(script);
在上面的代码中，我们创建了一个新的script元素，并在其中包含我们期望从服务器获取的JSON响应的URL。同时，我们还在URL中指定了要调用的回调函数的名称。一旦页面加载并向服务器发送JSONP请求，服务器将返回调用callback参数指定的回调函数和JSON数据。在这种情况下，handleResponse函数将被调用。
八、JS读取txt文件内容
可以使用fetch API来读取txt文件中的纯文本内容。以下是一个示例：
fetch('data.txt')
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));
在上面的代码中，我们使用response.text()方法而不是response.json()方法读取txt文件的内容。
九、前端JS读取JSON文件
在前端开发过程中，JavaScript经常用于读取JSON文件。我们可以将JSON数据存储在本地文件或与服务器进行通信以检索数据。以下是一个读取存储在HTML中的JSON数据示例：
const data = JSON.parse(document.getElementById('data').textContent);
console.log(data);
在上面的代码中，我们使用JSON.parse方法将存储在HTML中的JSON数据转换为可用的JavaScript对象。
结论
在Web开发过程中，读取JSON文件是一项常见任务。JavaScript提供了一组强大的API和工具，使我们可以轻松地读取和操作JSON文件。使用纯JavaScript、jQuery、XMLHttpRequest、fetch、Node.js或浏览器API，我们可以轻松地读取和处理JSON。此外，通过CORS或JSONP等技术，我们还可以跨域读取JSON数据。
