蓝桥杯【数据交互】天气预报查询

使用$.each()遍历数据并渲染天气预报,

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

文章展示了如何使用$.each()函数遍历数组和JSON对象，特别是在获取天气数据并动态生成HTML结构时的应用。通过$.get()发送请求获取天气信息，如果请求成功，将天气数据插入到页面的特定元素中。

知识点：$.each()是对数组，json和dom结构等的遍历

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'````'+item);

输出的结果为：

0```````aa
1```````bb
 2```````cc
3```````dd

 function getweather() {
     //TODO：请补充代码
     var row=[];
     $.get("js/weather.json",res=>{
        console.log(res);
        if(res.success!='1'){
            alert('请求成功');
        }
        else{
            console.log('请求成功');
            $.each(res.result,(i,item)=>{
                console.log(item.weather);
                row.push(`
                <div class="item" >
                <img src="${item.weather_icon}">
                <div class="item-mess">
                    <div>${item.weather}</div>
                    <div>${item.temperature}</div>
                    <div>${item.winp}</div>
                    <div>
                        <span>${item.days}</span>
                        <span>${item.week}</span>
                    </div>
                </div>
            </div>
                `)
                $('.week-weather').empty().append(row.join(' '))
            })
        }
     })
}