jQuery简易天气预报页面
时间: 2024-02-05 16:07:48 浏览: 78
以下是一个简单的jQuery天气预报页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>天气预报</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var city = $("#city").val();
var url = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=YOUR_APP_ID";
$.get(url, function(data){
var temp = (data.main.temp - 273.15).toFixed(1);
var weather = data.weather[0].description;
$("#result").html("城市:" + city + "<br>温度:" + temp + "℃<br>天气:" + weather);
});
});
});
</script>
</head>
<body>
<h1>天气预报</h1>
<p>请输入城市名称:</p>
<input type="text" id="city">
<button id="submit">查询</button>
<div id="result"></div>
</body>
</html>
```
这个页面包含一个输入框和一个按钮,用户可以在输入框中输入城市名称并点击按钮查询天气。当用户点击按钮时,页面会向OpenWeatherMap API发送一个GET请求,并将返回的JSON数据解析为温度和天气描述。最后,页面将这些信息显示在一个div元素中。
阅读全文