在HTML中遍历数据，通常是指从服务器获取数据并在客户端展示，这可以通过JavaScript和AJAX技术实现，本文将详细介绍如何在HTML中遍历数据，包括使用JavaScript、jQuery和原生JavaScript的方法。
JavaScript方法
1、1 使用XMLHttpRequest对象
XMLHttpRequest是JavaScript中用于与服务器交互的一个对象，可以用来发送HTTP请求并接收响应，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历数据示例</title>
<script>
function fetchData() {
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 output = document.getElementById("output");
for (var i = 0; i < data.length; i++) {
var item = document.createElement("p");
item.textContent = data[i].name + ": " + data[i].value;
output.appendChild(item);
}
}
</script>
</head>
<body>
<button onclick="fetchData()">获取数据</button>
<div id="output"></div>
</body>
</html>
在这个示例中，我们首先创建了一个XMLHttpRequest对象，然后定义了一个onreadystatechange事件处理函数，当请求的状态变为4(已完成)且HTTP状态码为200(成功)时，我们将响应文本解析为JSON对象，并调用displayData函数将其显示在页面上，我们使用open方法设置请求类型、URL和是否异步，然后使用send方法发送请求。
1、2 使用Fetch API
Fetch API是现代浏览器中用于发送网络请求的API,它的语法更简洁易懂，以下是一个使用Fetch API的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历数据示例</title>
<script>
function fetchData() {
fetch("data.json")
.then(response => response.json())
.then(data => displayData(data))
.catch(error => console.error("Error fetching data:", error));
}
function displayData(data) {
var output = document.getElementById("output");
for (var i = 0; i < data.length; i++) {
var item = document.createElement("p");
item.textContent = data[i].name + ": " + data[i].value;
output.appendChild(item);
}
}
</script>
</head>
<body>
<button onclick="fetchData()">获取数据</button>
<div id="output"></div>
</body>
</html>
在这个示例中，我们使用了Fetch API的fetch方法发送请求，然后使用then方法处理响应，当响应成功时，我们将其解析为JSON对象，并调用displayData函数将其显示在页面上，如果发生错误，我们将在控制台中记录错误信息，我们将fetchData函数绑定到按钮的onclick事件上。
jQuery方法
2、1 在头部引入jQuery库后，可以使用$.ajax()方法发送请求：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历数据示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="fetchData()">获取数据</button>
<div id="output"></div>
</body>
</html>
function fetchData() {
$.ajax({url: "data.json", dataType: "json"})
.done(function(data){ displayData(data); }); // 当请求成功时执行此函数 }); // jQuery AJAX请求完成后的回调函数 ```
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/211739.html
微信扫一扫 