前端获取天气接口

步骤3: 编写JavaScript代码 (weather.js)

$(document).ready(function() {
    // 设置API URL和参数
    var apiUrl = "http://api.openweathermap.org/data/2.5/weather";
    var apiKey = "YOUR_API_KEY"; // 替换为您的API密钥
    var city = "Beijing"; // 您想查询的城市名
    var units = "metric"; // 温度单位，可选值："metric" 或 "imperial"
    // 构建完整的API请求URL
    var fullUrl = apiUrl + "?q=" + city + "&appid=" + apiKey + "&units=" + units;
    // 使用jQuery的Ajax方法获取天气数据
    $.ajax({
        url: fullUrl,
        type: "GET",
        dataType: "json",
        success: function(data) {
            // 解析返回的数据并更新页面元素
            var currentWeather = data.weather[0];
            var temperature = currentWeather.temp;
            var description = currentWeather.description;
            $("#weatherinfo").html("当前温度：" + temperature + "℃
天气状况：" + description);
        },
        error: function(error) {
            console.log("Error: ", error);
        }
    });
});

确保将YOUR_API_KEY替换为您从OpenWeatherMap获取的实际API密钥。

步骤4: 测试

保存您的HTML和JavaScript文件，并在浏览器中打开HTML页面，您应该能看到指定城市的天气信息。

请注意，上述示例仅用于教学目的，实际应用中可能需要更复杂的错误处理和用户输入验证，由于跨域限制，直接在本地文件系统中运行可能会遇到问题，建议在Web服务器上进行测试。

本文名称：前端获取天气接口
转载注明：http://www.gawzjz.com/qtweb/news9/193309.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联