AJAX——案例_天气预报

作者：System 时间：2024年08月19日分类：所有,ajax 字数：1442

以下是一个简单的使用AJAX获取天气预报信息的示例代码。这个例子假设你已经有了一个API密钥，并且你知道城市的ID。




<!DOCTYPE html>
<html>
<head>
    <title>天气预报</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="weather-info">等待获取天气信息...</div>
 
<script>
$(document).ready(function() {
    var apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥
    var cityId = 'YOUR_CITY_ID'; // 替换为你想要的城市ID
 
    $.ajax({
        url: `https://api.openweathermap.org/data/2.5/weather?id=${cityId}&appid=${apiKey}&units=metric`,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var weatherInfo = `
                城市: ${data.name}<br>
                温度: ${data.main.temp}°C<br>
                气压: ${data.main.pressure}hPa<br>
                湿度: ${data.main.humidity}%<br>
                天气: ${data.weather[0].description}<br>
                风速: ${data.wind.speed}m/s
            `;
            $('#weather-info').html(weatherInfo);
        },
        error: function(xhr, status, error) {
            var errorMsg = `出错了 - ${status}: ${error}`;
            $('#weather-info').html(errorMsg);
        }
    });
});
</script>
 
</body>
</html>

在这个例子中，我们使用jQuery库来简化AJAX请求的编写。我们首先设置了API密钥和城市ID，然后通过AJAX向OpenWeatherMap的API发送GET请求，获取相应城市的天气信息。成功获取信息后，我们将其格式化并展示在页面上。如果请求失败，我们将错误信息展示出来。

请注意，你需要替换YOUR_API_KEY和YOUR_CITY_ID为你自己的API密钥和城市ID。此外，你还需要确保你的网页可以访问到https://api.openweathermap.org。

AJAX——案例_天气预报

评论已关闭

推荐阅读