首页前端读取json文件并输出

前端读取json文件并输出

时间: 2023-09-08 12:15:12 浏览: 90

可以使用JavaScript中的XMLHttpRequest对象来读取JSON文件，然后使用JSON.parse()方法将读取到的JSON字符串转换成JavaScript对象，最后可以将对象的内容输出到HTML页面中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>读取JSON文件示例</title> </head> <body> <h1>读取JSON文件示例</h1> <div id="output"></div> <script> // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 通过GET方式请求JSON文件 xhr.open('GET', 'data.json', true); // 设置响应类型为JSON xhr.setRequestHeader('Content-type', 'application/json'); // 监听请求状态变化 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 将响应内容转换成JavaScript对象 var data = JSON.parse(xhr.responseText); // 将对象输出到HTML页面中 var outputDiv = document.getElementById('output'); outputDiv.innerText = JSON.stringify(data); } }; // 发送请求 xhr.send(); </script> </body> </html> ``` 在上面的代码中，我们通过XMLHttpRequest对象发起了一个GET请求来读取名为data.json的JSON文件，然后将响应内容转换成JavaScript对象，并将其输出到HTML页面中。

阅读全文