首页html读取json文件中的数据

html读取json文件中的数据

时间: 2023-10-26 17:06:37 浏览: 110

可以使用JavaScript中的XMLHttpRequest对象来读取JSON文件中的数据，然后将其解析为JavaScript对象。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>读取JSON文件</title> </head> <body> <h1>JSON数据：</h1> <pre id="output"></pre> <script> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); document.getElementById("output").innerHTML = JSON.stringify(data, null, 2); } }; xhr.open("GET", "data.json", true); xhr.send(); </script> </body> </html> ``` 在这个例子中，我们使用XMLHttpRequest对象来异步请求一个名为"data.json"的文件。当请求完成并且状态码为200时，我们将响应文本解析为JavaScript对象并将其输出到页面上。请注意，我们使用JSON.stringify函数来格式化输出的JSON数据。

阅读全文