ajax访问阿里云天气接口,获取7天天气

复制代码
$.ajax({
    url: 'https://ali-weather.showapi.com/day15',
    type: 'GET', // 或者 'POST',根据API要求
    dataType: 'json', // 预期服务器返回的数据类型
    headers: {
        'Authorization': "APPCODE c63ddd9d9f404df1913593131ff84a67",// 将'你的API密钥'替换为实际的API密钥
        'X-Requested-With': 'XMLHttpRequest' //跨域
    },
    crossDomain: true,  //跨域
    data: {
        area: area,
    },
    success: function (response) {
        // 请求成功时的回调函数
        console.log(response); // 处理返回的数据
        var dayList = response.showapi_res_body.dayList;
        if (dayList==null){
            alert("暂时无法获取天气数据")
        }else{
            var html = '';
            for(let i=1;i<8;i++){
                console.log(dayList[i]['daytime']);
                html += '<div class="weather-item" >'+
                    '<div style="color: white">'+dayList[i]['daytime'].substring(4)+'</div>'+
                    '<img class="weather-icon" src="'+dayList[i]['day_weather_pic']+'">'+
                    '<div class="weather-temp" style="color: white">'+dayList[i]['day_air_temperature']+'℃</div></div>';
            }
            $('#weatherForecast').html(html);

        }
    },
    error: function (xhr, status, error) {
        // 请求失败时的回调函数
        console.error("An error occurred: " + error);
    }
});

注意空格是个坑

相关推荐
傻瓜搬砖人8 小时前
SpringMVC的请求
java·前端·javascript·spring
爱上好庆祝8 小时前
学习js的第六天(js基础的结束)
开发语言·前端·javascript·学习·ecmascript
IT_陈寒8 小时前
JavaScript的异步地狱,我差点没爬出来
前端·人工智能·后端
光影少年8 小时前
Webpack打包性能优化方面的经验
前端·webpack·性能优化
Das18 小时前
通过命令行下载kaggle数据
前端·chrome
剑神一笑9 小时前
CSS Animation Timeline 可视化动画编辑器:从关键帧到流畅动画
前端·css·编辑器
Dylan的码园9 小时前
springBoot与Web后端基础
前端·spring boot·后端
广州华水科技9 小时前
单北斗变形监测应用于水库的精准GNSS技术解析
前端
2401_878454539 小时前
HTML和CSS的复习2
前端·css·html
We་ct9 小时前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器