ajax实现的天气预报 

<!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>

 

posted @ 2016-12-22 11:03  malu15  阅读(3188)  评论(0)    收藏  举报