Ajax 天气预报API案例

最新推荐文章于 2024-04-22 15:07:14 发布

Cutterman

最新推荐文章于 2024-04-22 15:07:14 发布

阅读量526

点赞数

分类专栏： Ajax 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_64355119/article/details/130570341

版权

Ajax 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<script>
        var input = document.querySelector('#city')
        var btn = document.querySelector('button')
        var tab = document.querySelector('.tab')
        // 城市
        var city = document.querySelectorAll('.tab table tbody td:first-of-type')
        // 日期
        var weatherDate = document.querySelectorAll('.tab table tbody td:nth-of-type(2)')
        // 天气情况
        var weather = document.querySelectorAll('.tab table tbody td:nth-of-type(3)')
        // 白天温度(高温)
        var HighestTemperature = document.querySelectorAll('.tab table tbody td:nth-of-type(4)')
        // 白天温度(低温)
        var minimumTemperature = document.querySelectorAll('.tab table tbody td:nth-of-type(5)')
        var xml = new XMLHttpRequest();
        btn.onclick = function () {
            xml.open('get', 'https://v0.yiketianqi.com/free/week/?appid=66519423&appsecret=kxJjl8Ce&city=' + input.value + '')
            xml.send(null);
            xml.onreadystatechange = function () {
                if (xml.status === 200 && xml.readyState === 4) {
                    javaDate = JSON.parse(xml.responseText)
                    if (javaDate.city) {
                        // 将天气盒子可视化
                        tab.style.display = 'block'
                        /* 获取到的数据 */
                        // console.log(javaDate.data);
                        // 渲染城市
                        city.forEach(function (item) {
                            // console.log(item);
                            item.innerHTML = javaDate.city
                        })
                        //渲染日期
                        for (var i = 0; i < weatherDate.length; i++) {
                            weatherDate[i].innerHTML = javaDate.data[i].date
                        }
                        //渲染天气情况
                        for (var i = 0; i < weather.length; i++) {
                            weather[i].innerHTML = javaDate.data[i].wea
                        }
                        //渲染白天温度(高温)
                        for (var i = 0; i < HighestTemperature.length; i++) {
                            HighestTemperature[i].innerHTML = javaDate.data[i].tem_day + '℃'
                        }
                        //渲染白天温度(低温)
                        for (var i = 0; i < minimumTemperature.length; i++) {
                            minimumTemperature[i].innerHTML = javaDate.data[i].tem_night + '℃'
                        }
                    }
                }
            }
        }

    </script>