Ajax获取 json 格式的天气

最新推荐文章于 2024-07-12 16:42:46 发布

赵烧鸡排饭-

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量313

点赞数 3

文章标签： json ajax 前端

本文链接：https://blog.csdn.net/m0_46950064/article/details/126291694

版权

根据城市名获取城市天气

请求地址：http://wthrcdn.etouch.cn/weather_mini

请求方式：get

请求参数：city

响应内容：json

代码如下：

HTML

<input type="text" placeholder="请输入查询的城市" class="ipt">
    <button class="btn">查询天气</button>
    <div class="city-l">城市名称：<span class="city"></span></div>
    <hr>
    <ul class="weather">
        <li>
            <span class="date">2日星期三</span>
            <span class="high">高温26°C</span>
            <span class="low">低温16°C</span>
            <span class="type">晴</span>
        </li>
        <li>
            <span class="date">2日星期三</span>
            <span class="high">高温26°C</span>
            <span class="low">低温16°C</span>
            <span class="type">晴</span>
        </li>
        <li>
            <span class="date">2日星期三</span>
            <span class="high">高温26°C</span>
            <span class="low">低温16°C</span>
            <span class="type">晴</span>
        </li>
        <li>
            <span class="date">2日星期三</span>
            <span class="high">高温26°C</span>
            <span class="low">低温16°C</span>
            <span class="type">晴</span>
        </li>
        <li>
            <span class="date">2日星期三</span>
            <span class="high">高温26°C</span>
            <span class="low">低温16°C</span>
            <span class="type">晴</span>
        </li>
    </ul>

CSS

 <style>
        .ipt{
            margin-left:500px;
        }
        .city-l{
            margin-left: 530px;
        }
        li {
            width: 200px;
            height: 200px;
            background-color: #999;
            text-align: center;
            float: left;
            margin-right: 20px;
            list-style: none;
        }

        li span {
            display: block;
            margin: 10px auto;
        }
    </style>

<script>
        $(".btn").on("click", function () {    //给按钮添加点击事件
            var nname = $(".ipt").val().trim();   
            $(".city").text(nname)
            $.get({
                url: "http://wthrcdn.etouch.cn/weather_mini",
                data: {
                    city: nname
                },
                success: function (backData) {           
                    var str = "";    //遍历
                    for (var i = 0; i < JSON.parse(backData).data.forecast.length; i++) {
                        str += '<li>' +
                          '<span class="date">' +  JSON.parse(backData).data.forecast[i].date + '</span>' +
                            '<span class="high">' + JSON.parse(backData).data.forecast[i].high + '</span>' +
                            '<span class="low">' + JSON.parse(backData).data.forecast[i].low + '</span>' +
                            '<span class="type">' + JSON.parse(backData).data.forecast[i].type + '</span>' +
                            '</li>'
                    }
                    $(".weather").html(str);
                }
            })
        })
    </script>