新手向一个超简单的基于jQuery-ajax的天气预报

jiezi
5 年前
废话不多说，直接上代码。
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 天气 </title>
    </head>
    <body>
        <div id="app">
            <h2> 最新天气实况 </h2>
            <p> 城市：<span></span></p>
            <p> 日期：<span></span></p>
            <p> 天气：<span></span></p>
            <p> 当前气温：<span></span></p>
            <p> 风向：<span></span></p>
            <p> 最高气温：<span></span></p>
            <p> 最低气温：<span></span></p>
            <p> 温馨提醒：<span></span></p>
            <h2> 未来 7 天天气预报 </h2>
            <table border="1" id="detail">
                <thead>
                    <tr>
                        <th> 日期 </th>
                        <th> 天气 </th>
                        <th> 当前温度 </th>
                        <th> 最高气温 </th>
                        <th> 最低气温 </th>
                        <th> 风向 </th>
                        <th> 风力 </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $.ajax({
                    url: 'https://www.tianqiapi.com/api/?version=v1',
                    type: 'get',
                    data: {city: "北京"},
                    dataType: 'json',
                    error: function(resp, status) {console.log('请求失败：', status, resp);
                    },
                    success: function(resp, status) {
                        var wCity = resp.city;
                        var wDate = resp.data[0].date;
                        var wWea = resp.data[0].wea;
                        var wTem = resp.data[0].tem;
                        var wWin = resp.data[0].win[0];
                        var wTemMax = resp.data[0].tem1;
                        var wTemMin = resp.data[0].tem2;
                        var wAirTips = resp.data[0].air_tips;
                        $('#app p:nth-child(2) span').html(wCity);
                        $('#app p:nth-child(3) span').html(wDate);
                        $('#app p:nth-child(4) span').html(wWea);
                        $('#app p:nth-child(5) span').html(wTem);
                        $('#app p:nth-child(6) span').html(wWin);
                        $('#app p:nth-child(7) span').html(wTemMax);
                        $('#app p:nth-child(8) span').html(wTemMin);
                        $('#app p:nth-child(9) span').html(wAirTips);
                        $("#detail tbody").empty();
                        for (var i = 0; i < 7; i++) {
                            var forword_day = "<tr><td>" +
                                resp.data[i].day + "</td><td>" +
                                resp.data[i].wea + "</td><td>" +
                                resp.data[i].tem + "</td><td>" +
                                resp.data[i].tem1 + "</td><td>" +
                                resp.data[i].tem2 + "</td><td>" +
                                resp.data[i].win[0] + "</td><td>" +
                                resp.data[i].win_speed + "</td>" +
                                "</tr>";
                            $("#detail tbody").append(forword_day);
                        }
                    }
                })
            })
        </script>
    </body>
</html>
效果大概是这样的
实习时又用到了 Ajax，巴拉巴拉写个例子出来。
要讲的话也没什么好讲的吧，挺简单的。
希望能对新手产生启发作用。