用ajax实现动态获取天气预报的案例

最新推荐文章于 2023-05-09 00:23:06 发布

bellah521

最新推荐文章于 2023-05-09 00:23:06 发布

阅读量4.5k

点赞数

分类专栏： JavaScript 文章标签： ajax jquery api 函数

本文链接：https://blog.csdn.net/bellah521/article/details/51955188

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文主要思想是用ajax实现动态获取天气预报

百度天气api地址

ak: ‘0A5bc3c4fb543c8f9bc54b77bc155724’是自己获得密钥

  //ajax实时天气的代码

    var span = document.getElementById("time");

    function getWeather() {
        //基于jQuery的实时天气功能实现
        $.ajax({
            //设置请求类型
            type:"get",
            //
            timeout:5000,
            //设置请求地址
            url: 'http://api.map.baidu.com/telematics/v3/weather',
            //设置需要发送的数据
            data: {location: "北京", output: 'json', ak: '0A5bc3c4fb543c8f9bc54b77bc155724'},
            //定义此请求为跨域请求
            dataType: 'jsonp',
            success: function (data) {
                //console.log(data)
                //请求成功执行的代码
                //获取到与功能相关的数据
                var today =  data['results'][0]['weather_data'][0];
                //把请求到的数据渲染在页面上
                span.innerText = today.date;
                console.log(today)
                $("#daypic").html("<img src="+ today.dayPictureUrl +" >");
                $("#nigpic").html("<img src="+ today.nightPictureUrl +">");
                $("#wea").html(today.weather);

            },
            error: function () {
                span.innerText = "天气请求超时";
                $("#daypic").html("");
                $("#nigpic").html("");
                $("#wea").html("");
            }
        })
    }
    getWeather();

    //连接网络时，获取天气
    window.ononline = function () {
        getWeather();
    }

    //无网络连接时，提醒用户联网以获取天气
    window.onoffline = function () {

        span.innerText = "请连接网络以获取天气";
    }