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);
    }
});

注意空格是个坑

相关推荐
初出茅庐的几秒前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
三掌柜6664 分钟前
2025三掌柜赠书活动第三十五期 AI辅助React Web应用开发实践:基于React 19和GitHub Copilot
前端·人工智能·react.js
YH丶浩4 分钟前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin5 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js
小岛前端6 分钟前
大小仅 1KB!超级好用!计算无敌!
前端·javascript·开源
没有鸡汤吃不下饭18 分钟前
Git将某个分支合并到开发(dev)、测试(test)后突然想撤销该分支的功能,怎么处理?
前端·git·github
文心快码BaiduComate18 分钟前
Comate分饰多角:全栈开发一个Python学习网站
前端·后端·python
90后的晨仔25 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
我是日安29 分钟前
从零到一打造 Vue3 响应式系统 Day 20 - Reactive:reactive 极端案例
前端·vue.js
Slice_cy30 分钟前
📚 uniapp版本懒加载 + 不定高虚拟列表实现
前端