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

2019年9月14日 303次阅读 来源: 我好菜啊

废话不多说，直接上代码。

<!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=1001&appsecret=5578',
                    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>

效果大概是这样的
《【新手向】一个超简单的基于jQuery ajax的天气预报》

实习时又用到了Ajax，巴拉巴拉写个例子出来。
要讲的话也没什么好讲的吧，挺简单的。
希望能对新手产生启发作用。

    原文作者：我好菜啊
    原文地址: https://segmentfault.com/a/1190000019985065
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞