使用ajax调用简单api

目标

使用ajax调用api，返回数据

示例代码

全部代码 
     <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>weather</title>
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    	</head>
    <body>
    	<h1>天气查询</h1>
    	    <input type="text" placeholder="请输出你的地址" id="tel"/>
    	    <button id="ajax">确定</button>
    	    <p><span id="reslut"></span></p>
    		<p><span id="times"></span></p>
    	    <script type="text/javascript">
    	    $(function(){
    	        $('#ajax').on('click',function(){
    	            var $telValue=$('#tel').val();
    	            if($telValue=="") {
    	                alert('不能为空！');
    	                return;
    	            }
    	            $.ajax({
    	                type: 'GET',
    	                dataType:'json',
    			jsonpCallback:"getData",
    	                url: 'https://v2.alapi.cn/api/tianqi',
    			data:{
    			      token:,//用你自己的
    			      city:$telValue
    			},

    	                success: function(data){//对返回数据进行处理
    	                var reslutData=data.data;
    	                console.log(reslutData);
    			$('#reslut').text("你查询的是:"+reslutData.city+","+"明天的天气是:"+reslutData.weather);
    			$('#times').text("当前时间是"+reslutData.update_time);
    	                }             
    	            })
    	        })       
    	    })
    	    </script>
    	</body>

    </html>

实现效果

posted @ 2022-09-16 13:41  冥天肝  阅读(519)  评论(0)  编辑  收藏  举报