正文

jquery用api查询天气代码

技术帮
技术帮 V管理员 /143阅读/0评论
0319

jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，本文将介绍如何使用 jQuery 和 OpenWeatherMap API 来查询天气信息，我们将创建一个简单的 HTML 页面，使用 jQuery 发送请求并处理返回的数据。

我们需要注册 OpenWeatherMap 以获取 API 密钥，访问 https://openweathermap.org/api 并注册一个免费帐户，注册后，您将获得一个 API 密钥，我们将在接下来的步骤中使用它。

jquery用api查询天气代码

接下来，创建一个名为 "weather.html" 的 HTML 文件，并在其中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 将此处的 YOUR_API_KEY 替换为您从 OpenWeatherMap 获取的 API 密钥
        const apiKey = 'YOUR_API_KEY';
    </script>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name">
    <button id="getWeather">Get Weather</button>
    <div id="weatherData">
        <h2>Weather Information:</h2>
        <p id="temperature"></p>
        <p id="humidity"></p>
        <p id="windSpeed"></p>
    </div>
    <script src="weather.js"></script>
</body>
</html>

现在，创建一个名为 "weather.js" 的 JavaScript 文件，并在其中添加以下内容：

$(document).ready(function() {
    $('#getWeather').on('click', function() {
        const cityName = $('#city').val();
        if (cityName) {
            const url = https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric;
            $.ajax({
                url: url,
                method: 'GET',
                success: function(data) {
                    $('#temperature').text(Temperature: ${data.main.temp}°C);
                    $('#humidity').text(Humidity: ${data.main.humidity}%);
                    $('#windSpeed').text(Wind Speed: ${data.wind.speed} m/s);
                },
                error: function(err) {
                    console.log(err);
                }
            });
        } else {
            alert('Please enter a city name.');
        }
    });
});

在这个例子中，我们首先引入了 jQuery 库，然后在 HTML 文件中创建了一个输入框和一个按钮，用户可以在输入框中输入城市名称，然后点击 "Get Weather" 按钮查询天气信息，查询结果将在页面上显示。

在 "weather.js" 文件中，我们使用 jQuery 的 $(document).ready() 函数确保 DOM 完全加载后再执行代码，我们为 "Get Weather" 按钮添加了一个点击事件监听器，当用户点击按钮时，我们将获取输入框中的城市名称，并构建一个请求 URL。

接下来，我们使用 jQuery 的 $.ajax() 函数发送一个 GET 请求到 OpenWeatherMap API，在请求成功时，我们将从返回的数据中提取温度、湿度和风速信息，并将其显示在页面上，如果请求失败，我们将在控制台中打印错误信息。

现在，您可以在浏览器中打开 "weather.html" 文件，输入一个城市名称并点击 "Get Weather" 按钮来查询天气信息，这个简单的例子展示了如何使用 jQuery 和 OpenWeatherMap API 来创建一个实用的天气查询应用。