使用ajax實現查詢天氣
之前做的項目，發佈到網上，如果有一樣的，那應該是巧合吧
代碼塊
<html>
<meta charset="UTF-8">
<title>天氣預報</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#ajaxs").on('click',function(){
var values = $("#btn1").val();//獲取用戶輸入的城市
//alert(values);
if(values == ""){
alert("輸入不能爲空");
return
}
$.ajax({
type:'GET',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'test',
url:'http://api.asilu.com/weather/',//接口地址
data:{
"city":values //要發送給服務器的數據
},
success:function(datas){ //服務器返回的數據 通過參數傳遞給客戶端
var data = datas; //datas 就是服務器返回的數據
//console.log(data);
var str="";
str +="<tr align='center'>";
str +="<td>"+data.city+"</td>";
str +="<td>"+data.weather[0].date+"</td>";
str +="<td>"+data.weather[0].temp+"</td>";
str +="<td>"+data.weather[0].wind+"</td>";
str +="<td>"+data.weather[0].weather+"</td>";
str +="</tr>";
$("#citySearch").html(str);
}
});
});
});
</script>
</head>
<body>
<h1>天氣查詢 </h1>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>當前城市</th>
<th>當前日期</th>
<th>當前溫度</th>
<th>當前風向</th>
<th>當前天氣</th>
</tr>
</thead>
<tbody id="citySearch">
</tbody>
</table>
<input type="text" placeholder="請輸入查找的城市" id="btn1"/>
<button id="ajaxs">確定</button>
</body>
</html>
c
###補充
這個代碼只是參考，查詢天氣可以用不同的API接口。
