随着互联网技术的不断发展，JavaScript渐渐成为了前端开发必不可少的一部分。当我们需要从本地获取JSON文件数据时，JavaScript就是一个非常有用的工具。在本文中，我们将从多个方面详细阐述如何使用JavaScript读取本地JSON文件数据。
一、js读取本地json文件数据并复制
首先，让我们看一下如何在JavaScript中读取本地JSON文件。下面是一个代码示例：
let xmlhttp = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
xmlhttp.onreadystatechange = function () { //异步处理回调
if (this.readyState == 4 && this.status == 200) { //如果响应已完成并且状态为200（成功）
let myObj = JSON.parse(this.responseText); //将JSON字符串转换为对象
console.log(myObj); //在控制台中输出JSON对象
}
};
xmlhttp.open("GET", "example.json", true); //指定HTTP请求方法、请求地址、异步flag
xmlhttp.send(); //发送HTTP请求
这里，我们使用了XMLHttpRequest对象发起了一个GET请求，并通过回调函数处理了响应结果。当响应结果的状态码为200时，我们成功获取了本地JSON文件数据，并将其转换为JavaScript对象。最后，我们可以通过console.log()方法将数据在控制台中进行输出。
二、js中读取本地json文件跨域
如果我们需要从其他服务器获取JSON文件数据，则可能会遇到跨域问题。在JavaScript中，我们可以通过使用JSONP（JSON with Padding）技术解决这个问题。JSONP是一种使用动态script元素请求数据的方法，它可以绕过浏览器的同源策略。下面是一个代码示例：
function mycallback(data) { //回调函数
console.log(data); //在控制台中输出JSON对象
}
let script = document.createElement('script'); //创建一个script元素
script.src = 'http://example.com/data.php?callback=mycallback'; //指定请求地址和回调函数名
document.body.appendChild(script); //将script元素添加到DOM中
在这个示例中，我们创建了一个名为mycallback的回调函数，并通过在请求地址中添加callback参数指定了这个回调函数。当服务器响应数据时，它将返回一段JavaScript代码，其中包含对回调函数的调用。这段JavaScript代码将被解析并执行，从而触发回调函数。
三、js引用json文件数据
如果我们需要在HTML文件中引用JSON数据，我们可以使用标签进行引用。下面是一个代码示例：
//引用JSON文件
console.log(myObj); //在控制台中输出JSON对象
在这个示例中，我们通过在标签中添加src属性指定了JSON文件的地址，并在之后的标签中使用JSON对象myObj。
四、js将数据写入json文件
如果我们需要将数据写入JSON文件，可以使用Node.js运行环境来实现。Node.js提供了fs模块，它可以用于文件I/O操作。下面是一个简单的代码示例：
let fs = require('fs'); //引入fs模块
let data = JSON.stringify({name: 'John', age: 30}); //将数据转换为JSON字符串
fs.writeFileSync('example.json', data); //将JSON字符串写入文件
console.log('Data written to file'); //在控制台中输出信息
在这个示例中，我们使用JSON.stringify()方法将数据转换为JSON字符串，并使用fs模块的writeFileSync()方法将JSON字符串写入文件。最后，我们在控制台输出了一条信息，以确认数据已经成功写入文件。
五、node读取json文件
如果我们需要在Node.js中读取JSON文件，我们可以使用require()方法实现。下面是一个代码示例：
let myObj = require('./example.json'); //读取JSON文件
console.log(myObj); //在控制台中输出JSON对象
在这个示例中，我们使用require()方法读取了JSON文件，并将其作为对象存储在myObj变量中。最后，我们通过console.log()方法将数据在控制台中输出。
六、js读取本地json文件数据填充html
如果我们需要将JSON数据填充到HTML文件中，我们可以使用JavaScript生成和修改HTML DOM元素。下面是一个代码示例：
let xmlhttp = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let myObj = JSON.parse(this.responseText); //将JSON字符串转换为对象
let output = document.getElementById('output'); //获取HTML元素
let html = '';
for (let i = 0; i < myObj.length; i++) { //遍历JSON数组
html += '' + myObj[i].name + '
'; //将数据生成HTML元素
}
output.innerHTML = html; //将HTML元素填充到页面中
}
};
xmlhttp.open("GET", "example.json", true);
xmlhttp.send();
在这个示例中，我们创建了一个XMLHttpRequest对象，并在回调函数中生成了对JSON数据的遍历，并将每个数据点生成为HTML元素。最后，我们将所有HTML元素填充到页面中的一个预先定义的HTML元素中（在这个例子中是id为“output”的元素）。
七、js修改本地json文件
修改本地JSON文件需要用到Node.js的fs模块。下面是一个代码示例：
let fs = require('fs'); //引入fs模块
let data = JSON.parse(fs.readFileSync('example.json')); //读取JSON文件并将其转换为对象
data.name = 'Jane'; //修改数据
fs.writeFileSync('example.json', JSON.stringify(data)); //将修改后的数据写入文件
console.log('Data written to file'); //在控制台中输出信息
在这个示例中，我们使用fs模块读取JSON文件，并将其转换为JavaScript对象。然后，我们修改了object对象的一个属性。最后，我们将修改后的对象序列化为JSON字符串，并使用fs模块的writeFileSync()方法写入文件，最后输出一条信息。
八、js读取本地json文件指定数据选取
如果我们只需要JSON数据的某一个片段，在JavaScript中，我们可以使用点表示法或方括号表示法从JSON对象中选择指定的数据。下面是一个代码示例：
let xmlhttp = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let myObj = JSON.parse(this.responseText); //将JSON字符串转换为对象
console.log(myObj.person.name); //使用点表示法选取数据
console.log(myObj['person']['age']); //使用方括号表示法选取数据
}
};
xmlhttp.open("GET", "example.json", true);
xmlhttp.send();
在这个示例中，我们使用XMLHttpRequest对象读取了JSON文件，并将其转换为JavaScript对象。然后，我们使用了点表示法和方括号表示法选取了两个不同的数据。
结语
在本文中，我们详细阐述了JavaScript读取本地JSON文件数据的多个方面，包括读取、写入、修改、选取和填充。通过这些技术，我们可以轻松地处理本地JSON文件数据，并将其用于前端开发和数据处理中。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/219882.html
微信扫一扫 
支付宝扫一扫 