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

本文主要思想是用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 = "请连接网络以获取天气";
    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值