【新手向】一個超簡單的基於jQuery ajax的天氣預報

時間 2019-11-07

標籤新手向一個簡單基於 jquery ajax 天氣預報欄目 JQuery 简体版

原文原文鏈接

廢話很少說，直接上代碼。css

<!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&appid=test&appsecret=test',
                    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>

效果大概是這樣的
html