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

注意空格是个坑

相关推荐
送鱼的老默24 分钟前
学习笔记--入门typescript直接案例开搞
前端·typescript
Prometheus24 分钟前
从 XMLHttpRequest 到 fetch、ReadableStream、SSE、EventSource:前端流式通信完整梳理
前端
光影少年31 分钟前
useEffect 完整理解:依赖数组、副作用清理、模拟生命周期
前端·react.js·程序员
之歆1 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript
大家的林语冰1 小时前
pnpm 11 发布,弃用 JSON 和 npm CLI,进化为纯 ES6 模块,新增 pnpm pack-app 等命令,供应链保护默认启用,要求 Node
前端·javascript·node.js
漓漾li1 小时前
每日面试题-前端2
前端·react.js·面试
Alice-YUE1 小时前
深入解析 JS 事件循环:浏览器与 Node.js 的差异全解析
前端·javascript·笔记·学习
HYCS1 小时前
用pixijs实现fabricjs(二):对象的基础位置信息
前端·javascript·canvas
淸湫1 小时前
项目中使用了全局权限管理,请详细描述如何通过Vue Router的路由守卫来实现全局权限控制?
前端·vue.js
雪铃儿1 小时前
Shorebird 之外,Flutter Android 热更新还有什么选择
android·前端