Question

我正在尝试进行API调用并将该数据显示在HTML页面上。当前，单击该按钮时未显示任何数据，但API调用已成功完成，因为我可以在另一页上跟踪使用情况。我的代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>API Data</h1>

<div id="container">
    <div id="api">Nothing Yet</div>
</div>

<br>

<button type="button" onclick="loadAPI()">Change Content</button>

<script>
function loadAPI() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "API URL with Token here", false);
  xhttp.addEventListener("load", loadData);
  xhttp.send();
}

function loadData() {
  document.getElementById('api').innerText = JSON.parse(this.responseText);
}
</script>

</body>
</html>

Answer 1

未显示任何数据，因为您没有将数据放入目标元素中。

要将数据插入#api，您需要执行类似的操作

document.getElementById('api').innerHTML = apiResponse; // no underscore
// or
document.getElementById('api').innerText = apiResponse;

我将其留给您阅读以了解安全性。 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

此外，XMLHttpRequest是asynchronous unless specified otherwise（在参数中）。因此，最可靠的方法是在load事件侦听器中显示数据。您的最终代码应类似于：

// Making a XMLHttpRequest
function loadAPI() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "API URL with Token Here", false);
  xhttp.addEventListener("load", loadData);
  xhttp.send();
}

// Displaying the data
function loadData() {
  document.getElementById('api').innerText = this.responseText;
}

请注意，如果您的响应使用JSON，则需要JSON.parse(this.responseText)才能访问数组/对象。

尝试以HTML显示API数据

1 个答案: