首页html读取json文件

html读取json文件

时间: 2023-10-26 09:05:35 浏览: 140

要在HTML中读取JSON文件，可以使用JavaScript中的XMLHttpRequest对象。以下是一个简单的示例： HTML文件： ``` <!DOCTYPE html> <html> <head> <title>读取JSON文件</title> <script src="script.js"></script> </head> <body> <h1>读取JSON文件</h1> <ul id="json-list"></ul> </body> </html> ``` JavaScript文件（script.js）： ``` var xmlhttp = new XMLHttpRequest(); var url = "data.json"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(this.responseText); displayData(data); } }; xmlhttp.open("GET", url, true); xmlhttp.send(); function displayData(data) { var list = document.getElementById("json-list"); for (var i = 0; i < data.length; i++) { var item = document.createElement("li"); item.appendChild(document.createTextNode(data[i].name + " - " + data[i].age)); list.appendChild(item); } } ``` 在此示例中，我们使用XMLHttpRequest对象从"data.json"文件中读取JSON数据。一旦我们获得数据，就可以使用JSON.parse()方法将其解析为JavaScript对象，并使用displayData()函数将其显示在HTML页面上。

阅读全文