html调用api接口代码
时间: 2023-10-26 07:05:00 浏览: 54
HTML本身并不能直接调用API接口,需要通过JavaScript来实现。可以使用XMLHttpRequest或fetch API来发送HTTP请求,获取API接口返回的数据,并将其渲染到HTML页面上。
下面是一个使用fetch API调用API接口的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用API接口</title>
</head>
<body>
<h1>API接口返回的数据:</h1>
<div id="data"></div>
<script>
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => {
document.getElementById('data').innerHTML = JSON.stringify(data);
})
.catch(error => console.error(error));
</script>
</body>
</html>
```
在上面的示例中,fetch函数发送了一个GET请求到https://example.com/api/data接口,并将返回的数据解析为JSON格式,最后将其渲染到HTML页面上。
需要注意的是,由于浏览器的同源策略限制,如果API接口和HTML页面不在同一个域名下,需要在API接口的服务器上设置跨域访问的允许头信息。