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