Javascript 试图以HTML显示API数据_Javascript_Html_Api

Javascript 试图以HTML显示API数据

javascript html api

Javascript 试图以HTML显示API数据,javascript,html,api,Javascript,Html,Api,我正在尝试进行API调用，并在HTML页面上显示该数据。当前，单击按钮时没有显示任何数据，但是API调用成功，因为我可以在另一个页面上跟踪我的使用情况。我的代码如下： <!DOCTYPE html> <html> <body> <h1>API Data</h1> <div id="container"> <div id="api">Nothing Yet</div> </div>

我正在尝试进行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>


API数据
还没有


更改内容
函数loadAPI（）{
var xhttp=newXMLHttpRequest（）；
open（“GET”，“此处带有令牌的API URL”，false）；
xhttp.addEventListener（“加载”，加载数据）；
xhttp.send（）；
}
函数loadData（）{
document.getElementById（'api'）.innerText=JSON.parse（this.responseText）；
}

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

要将数据插入#api，您需要执行以下操作

document.getElementById（'api'）。innerHTML=apiResponse；//无下划线
//或
document.getElementById（'api'）。innerText=apiResponse；

我把它留给你去读安全方面的书

此外，XMLHttpRequest是（在参数中）。因此，最可靠的方法是在

load

事件侦听器中显示数据。您的最终代码应该类似于：

//生成XMLHttpRequest
函数loadAPI（）{
var xhttp=newXMLHttpRequest（）；
open（“GET”，“此处带有令牌的API URL”，false）；
xhttp.addEventListener（“加载”，加载数据）；
xhttp.send（）；
}
//显示数据
函数loadData（）{
document.getElementById（'api'）.innerText=this.responseText；
}

注意：如果您的响应是JSON格式的，则需要

JSON.parse（this.responseText）

来访问数组/对象。

我的回答对您有帮助吗？您不能在

JSON.parse（..）

btw中插入文本