从百度获取天气API,并展示到网页上
时间: 2023-06-17 18:04:04 浏览: 83
要获取天气API,你需要先去百度开放平台注册账号并创建应用,然后申请获取天气API的权限。获取到API后,你可以通过以下步骤来展示天气信息到网页上:
1. 在HTML文件中添加一个用于显示天气信息的div标签,例如:
```html
<div id="weather"></div>
```
2. 在JavaScript文件中编写获取天气信息的代码,例如:
```javascript
var city = "北京"; // 城市名
var apiKey = "你的API Key"; // 从百度开放平台获取的API Key
var apiUrl = "http://api.map.baidu.com/weather/v1/?district_id=城市编码&data_type=all&ak=API Key"; // 天气API的请求地址
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var weatherData = response.result.forecasts[0]; // 获取当天的天气信息
var weatherHtml = "城市:" + city + "<br>" +
"日期:" + weatherData.date + "<br>" +
"天气:" + weatherData.text_day + "<br>" +
"温度:" + weatherData.low + "-" + weatherData.high + "℃";
document.getElementById("weather").innerHTML = weatherHtml; // 将天气信息展示到div标签中
}
};
xhr.open("GET", apiUrl.replace("城市编码", encodeURIComponent(city)), true);
xhr.send();
```
3. 在HTML文件中添加引入JavaScript文件的代码,例如:
```html
<script src="weather.js"></script>
```
这样,当网页加载完成时,就会自动获取指定城市的天气信息,并展示到页面上。
阅读全文