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

注意空格是个坑

相关推荐
恋猫de小郭9 小时前
Shopify 从 React Native 回到 Swift/Kotlin,但是你以为有手就行??
android·前端·ios
BillKu9 小时前
Element Plus 的 el-tab-pane:lazy 的说明
前端·javascript·vue.js
爱勇宝9 小时前
《道德经》第 11 章:真正有用的,常常是你没写出来的那部分
前端·后端·产品
jearry9 小时前
WebView2 原生拖放的桥接之道:拆解 yyzTools 的 drop-zone.js
前端·c++
一位正在转型AI全栈的前端工程师9 小时前
AI 全栈学习之旅 -Week 11:从 CLI 到浏览器:用 FastAPI、SSE 和 Vue 3 做一个可审核的 ReAct Agent
前端·python
10share9 小时前
我为什么用 React 重写了一个 VitePress
前端·react.js
计算机魔术师9 小时前
GPT-6 Astra 发布后,Sebastian Raschka 解析 looped transformer 与隐藏推理链传闻
前端
不可能片场10 小时前
Electron 退化成 node:一个环境变量的锅
前端·electron
楚楚河河10 小时前
js 变量声明
前端
Cicada12810 小时前
Web 服务器怎么选
运维·服务器·前端