Ajax获取json格式的天气

最新推荐文章于 2025-10-24 12:22:46 发布

原创最新推荐文章于 2025-10-24 12:22:46 发布 · 581 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#json #html #javascript #前端

本文介绍如何通过Ajax向http://wthrcdn.etouch.cn/weather_mini API发送请求，利用城市名获取实时天气信息。请求方式为Ajax，响应内容以JSON格式返回。

根据城市名获取城市天气

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

请求方法：Ajax

请求参数：city

相应内容：json

<style>
        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>

</head>

<body>
    <input type="text" placeholder="请输入查询的城市" id="city">
    <button id="btn">查询天气</button>
    <br>
    城市名称：<span id="cityname"></span>
    <hr>
    <ul id="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>

    
</body>

</html>

<script src="jquery.min.js"></script>
    <script>
        //思路：
        //1、给按钮设置点击事件
        //2、获取文本框中输入的城市名称
        //3、非空判断
        //4、城市名称文本，后面显示城市名称
        //5、发送ajax请求获取天气数据 http://wthrcdn.etouch.cn/weather_mini
        //6、把天气数据展示在页面上

        $("#btn").on("click", function () {
            var cityName = $("#city").val().trim();
            if (cityName == "") {
                alert("您还没有输入内容");
                return
            } else {
                $.ajax({
                    url: "http://wthrcdn.etouch.cn/weather_mini",
                    data: {
                        city: cityName
                    },
                    success: function (backData) {
                        // console.log(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>