試圖在 HTML 中顯示 API 數據

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 是異步的。 所以最可靠的方式是在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 個解決方案

解決方案1
1 2019-10-03 15:18:38

試圖在 HTML 中顯示 API 數據

問題描述

1 個解決方案

解決方案1 1 2019-10-03 15:18:38

解決方案1
1 2019-10-03 15:18:38