html数据统计分析页面(动态获取数据
时间: 2023-08-24 15:03:54 浏览: 41
要动态获取数据,你需要使用 JavaScript 和 AJAX 技术。以下是一个简单的例子:
HTML 代码:
```
<div id="data"></div>
<button onclick="loadData()">加载数据</button>
```
JavaScript 代码:
```
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
displayData(data);
}
};
xhr.open("GET", "data.json", true);
xhr.send();
}
function displayData(data) {
var table = "<table>";
for (var i = 0; i < data.length; i++) {
table += "<tr><td>" + data[i].name + "</td><td>" + data[i].value + "</td></tr>";
}
table += "</table>";
document.getElementById("data").innerHTML = table;
}
```
在这个例子中,当用户点击“加载数据”按钮时,`loadData()` 函数会发送一个 AJAX 请求,从服务器获取数据。当请求完成并返回数据时,`displayData()` 函数会将数据显示在页面上。
请注意,这个例子假设服务器返回的是一个 JSON 格式的数据。如果你的服务器返回的数据格式不同,你需要相应地修改 `loadData()` 和 `displayData()` 函数。