用ajax查询天气

最新推荐文章于 2019-11-11 09:53:42 发布

weixin_30652491

最新推荐文章于 2019-11-11 09:53:42 发布

阅读量503

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rlann/p/6253683.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .box {
                width: 500px;
                margin: 100px auto;
                overflow: hidden;
            }
            
            input {
                outline: none;
                border: none;
                height: 30px;
                float: left;
            }
            
            input[type=text] {
                width: 80%;
                text-align: center;
            }
            
            input[type=button] {
                width: 20%;
                color: #fff;
                font: 400 15px/30px "微软雅黑";
            }
            
            ul {
                margin-top: 35px;
            }
            
            ul,
            li {
                list-style: none;
                width: 100%;
            }
            
            li {
                background-color: #fff;
                border-radius: 5px;
                margin-bottom: 5px;
            }
            
            li>span {
                display: block;
                width: 33.3333333%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                float: left;
                background: lightblue;
            }
        </style>
        <title>天气预报</title>
    </head>

    <body bgcolor="#f3f4f5">
        <div class="box">
            <input type="text" placeholder="请输入你要查询的城市" />
            <input type="button" value="查询" />
            <ul>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            var $texts = $("input[type=text]");
            var $btn = $("input[type=button]");
            var str = "";

            $texts.on("focus", function() {
                $texts.val("").css("color", "#aaa");
            });
            $btn.on("click", function() {
                str = $texts.val();
                if(str.length > 0) {
                    str = encodeURIComponent(str);
                    $.ajax({
                        dataType: "jsonp",
                        type: "get",
                        url: "http://v.juhe.cn/weather/index?format=2&cityname=" + str + "&key=9817f1436de8051a9b635799dcb63f27",
                        success: function(data) {
                            var data = data.result.future;
                            console.log(data);
                            for(var i = 0; i < data.length; i++) {
                                var time = "<span>" + data[i].date + "</span>";
                                var temperature = "<span>" + data[i].temperature + "</span>";
                                var weather = "<span>" + data[i].weather + "</span>";
                                var liS = "<li>" + time + temperature + weather + "</li>";
                                $("ul").append(liS);
                            }
                        }
                    });
                } else {
                    $texts.val("WRONG！").css("color", "red");
                }
            });
        })
    </script>

</html>

结果是这样的：

转载于:https://www.cnblogs.com/rlann/p/6253683.html

weixin_30652491

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用ajax查询天气

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫