简易html页面调用api
时间: 2023-11-23 15:06:41 浏览: 30
要在HTML页面中调用API,您需要使用JavaScript来执行API请求。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>API Example</title>
</head>
<body>
<h1>API Example</h1>
<button onclick="getWeather()">Get Weather</button>
<div id="weather"></div>
<script>
function getWeather() {
fetch('https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById('weather').innerHTML = data.weather[0].description;
});
}
</script>
</body>
</html>
```
在这个示例中,当用户单击“Get Weather”按钮时,JavaScript代码将执行一个API请求,获取伦敦的天气数据。API请求使用 `fetch()` 方法发送,然后使用 `response.json()` 方法将响应转换为JSON格式。最后,天气数据的描述被写入一个HTML元素中,以便用户可以看到。请注意,您需要将 `YOUR_API_KEY` 替换为您自己的API密钥。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)