简易ajax天气渲染

最新推荐文章于 2019-05-20 15:08:59 发布

zhrookie

最新推荐文章于 2019-05-20 15:08:59 发布

阅读量692

点赞数

分类专栏： jquery 文章标签： jquery ajax

本文链接：https://blog.csdn.net/zhrookie/article/details/54171648

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易ajax天气渲染</title>
        <style>
            .con-top{
                height: 36px;
                line-height: 36px;
                text-align: center;
            }
            .able{
                text-align: center;
            }
            .able>h1{
                font-weight: 900;
            }
            table{
                border: 0;
                border-collapse: collapse;
                position: relative;
            }
            td,th{
                width: 120px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                font-family: "微软雅黑";
                font-size: 14px;
            }
            th{
                border-bottom: 1px solid #000;
            }
            tr{
                cursor: pointer;
            }

        </style>
        <script src="js/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div class="con-top">
            <select name="" id="selor1">
                <option value="">请选择</option>
            </select>
            <select name="" id="selor2">
                <option value="">请选择</option>
            </select>
            <button class="sear">查询</button>
        </div>
        <div class="able">
            <h1>北京城市</h1>
            <table align="center">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>风力</th>
                        <th>风向</th>
                        <th>高温</th>
                        <th>低温</th>
                        <th>天气类型</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <script>
            $(function(){
                //北京
                var $start="北京";
                ajas($start);
                //父级
                var area;
                $.ajax({
                    type:"get",
                    url:"json/citys.json",
                    async:true,
                    data:{},
                    dataType:"json",
                    success:function(data){
                        area=data.citylist;
                        $.each(area,function(i,v) {
                            $("#selor1").append("<option>"+v.p+"</option>");
                        });
                    }
                });
                //子级联动
                $("#selor1").change(function(){
                    $("#selor2").children("option:not(:first)").remove();
                    var $val=$("#selor1").val();
                    $.each(area, function(ii,vv) {
                        if(vv.p==$val){
                            var childs=vv.c;
                            $.each(childs,function(item,vals){
                                $("#selor2").append("<option>"+vals.n+"</option>");
                            })
                        }
                    });
                })
                //天气渲染
                $(".sear").click(function(){
                    var s2=$("#selor2").val();
                    $("tbody>tr,.able>div,.able>p,h1").remove();
                    ajas(s2);
                })
                //改变样式
                function change(){
                    $("tbody>tr:eq(1)").css({background:"blue"});
                    $("tbody>tr").hover(function(e){
                        $(".able>div").show();
                        $(".able>div").css({left:e.clientX+20+"px",top:e.clientY+"px",zIndex:"21"});
                    },function(){
                        $(".able>div").hide();
                    })
                }

                //ajax封装
                function ajas(vs){
                    $.ajax({
                        type:"get",
                        data:{},
                        url:"http://wthrcdn.etouch.cn/weather_mini?city="+vs,
                        dataType:"json",
                        async:"true",
                        success:function(data){
                            var airs=data;
                            if(airs.status==1000){
                                //温馨提示
                                //console.log(airs.data.ganmao);
                                $(".able").prepend("<div style='position:absolute;display:none;background:#ccc;color:#f00;'>"+airs.data.ganmao+"</div>");
                                $(".able").prepend("<h2 style=''>"+vs+"最近5天的天气预报"+"</h2>");
                                //昨日天气
                                $("tbody").append("<tr><td>"+airs.data.yesterday.date+"</td><td>"+airs.data.yesterday.fl+"</td><td>"+airs.data.yesterday.fx+"</td><td>"+airs.data.yesterday.high+"</td><td>"+airs.data.yesterday.low+"</td><td>"+airs.data.yesterday.type+"</td></tr>");
                                //预报
                                var to=airs.data;
                                var str="";
                                $.each(to.forecast,function(aa,bb){
                                    str="<tr><td>"+bb.date+"</td><td>"+bb.fengli+"</td><td>"+bb.fengxiang+"</td><td>"+bb.high+"</td><td>"+bb.low+"</td><td>"+bb.type+"</td></tr>";
                                    $("tbody").append(str);
                                })
                                change();
                            }else{
                                $(".able").prepend("<p style='color:red;'>该城市没有最新天气数据</p>");
                            }
                        }
                    });
                }
            })
        </script>
    </body>
</html>