ajax实现的天气预报

最新推荐文章于 2023-05-09 00:23:06 发布

Alison1996

最新推荐文章于 2023-05-09 00:23:06 发布

阅读量862

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WayToJs/p/6210325.html

版权

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>

</head>
<body>

    <h1>天气查询</h1>
    <input    type="text" placeholder="请输出你的地址" id="tel"/>

    <button id="ajax">确定</button>

    <p><span id="reslut"></span></p>


    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#ajax').on('click',function(){
            var $telValue=$('#tel').val();
            if($telValue=="") {
                alert('不能为空！');
                return;
            }
            $.ajax({
                type: 'GET',
                dataType:'jsonp',
                jsonp:'callback',                          
                  jsonpCallback:'getName',
                url: 'http://api.asilu.com/weather/',
                data:{
                    "city":$telValue        
                },
                success: function(data){
                    var reslutData=data;
                    console.log(reslutData);    
                    $('#reslut').text("你查询的是:"+reslutData.city+","+"明天的天气是:"+reslutData.weather[0].weather);
                } ,
               

            })
        })
        
    })
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/WayToJs/p/6210325.html

Alison1996

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax实现的天气预报

<!DOCTYPE html><html><head> <title>ajax</title></head><body> <h1>天气查询</h1> <input type="text" placeholder=...
复制链接

扫一扫