首页json数据怎么写在HTML中

json数据怎么写在HTML中

时间: 2024-03-23 14:14:05 浏览: 46

您好，可以使用JavaScript的XMLHttpRequest对象来加载并解析JSON数据，并将数据插入到HTML页面中的元素中。以下是示例代码： ``` <!DOCTYPE html> <html> <head> <title>JSON数据在HTML中的展示</title> </head> <body> <h1>JSON数据示例</h1> <div id="data-container"></div> <script> var xhr = new XMLHttpRequest(); xhr.open("GET", "data.json", true); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); var container = document.getElementById("data-container"); for (var i = 0; i < data.length; i++) { var p = document.createElement("p"); p.innerHTML = "姓名：" + data[i].name + "，年龄：" + data[i].age; container.appendChild(p); } } else { console.log("Failed to load data"); } }; xhr.send(); </script> </body> </html> ``` 在这个示例中，我们通过XMLHttpRequest对象从data.json文件中加载JSON数据，并将数据插入到id为"data-container"的div元素中。您可以根据实际情况更改代码。希望这能对您有所帮助。

阅读全文