网页接入百度天气api
时间: 2024-06-07 16:11:57 浏览: 16
要接入百度天气API,你需要先申请百度开发者账号并创建应用,然后使用百度天气API的调用接口来获取天气信息。以下是一个简单的网页接入百度天气API的示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气查询</title>
</head>
<body>
<label for="city">城市:</label>
<input type="text" id="city">
<button onclick="getWeather()">查询</button>
<p id="result"></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
```
JavaScript代码(weather.js):
```javascript
function getWeather() {
var city = document.getElementById("city").value;
var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + city + "&output=json&ak=你的百度AK";
$.ajax({
url: url,
type: "GET",
dataType: "jsonp",
success: function (data) {
var today = data.results[0].weather_data[0];
var result = "城市:" + data.results[0].currentCity + "<br>";
result += "日期:" + today.date + "<br>";
result += "天气:" + today.weather + "<br>";
result += "温度:" + today.temperature + "<br>";
result += "风力:" + today.wind + "<br>";
document.getElementById("result").innerHTML = result;
},
error: function () {
alert("查询失败!");
}
});
}
```
在这个示例中,我们使用jQuery库来发起AJAX请求,并且使用百度天气API的JSONP格式来获取天气信息。你需要将代码中的“你的百度AK”替换成你自己的百度API Key才能正常使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)