本文跟大家分享全國天氣預報API Ajax 透過城市名稱取得數據，透過html和js兩部分代碼實現天氣預報效果，輸入城市就會出現天氣狀況，效果非常棒，有興趣的朋友可以參考下
預覽圖（比較簡單粗糙）
聚合資料全國天氣預報介面：https://www.juhe.cn/docs/api/id/ 39
介面位址：http://v.juhe.cn/weather/index
支援格式：json/xml
請求方式：get
請求範例：http: //v.juhe.cn/weather/index?format=2&cityname=蘇州&key=您申請的KEY
呼叫範例及偵錯工具：API測試工具
請求參數說明：
名稱類型必填說明
cityname string Y 城市名或城市ID，如：“蘇州”，需要utf8 urlencode
dtype string N 返回資料格式：json或xml,預設json
format int N 未來6天預報(future )兩種回傳格式，1或2，預設1
key string Y 你申請的key
#HTML部分程式碼：
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8" > <title>天气预报</title> <script src="jquery-2.1.1.min.js"></script> <link rel="stylesheet" href="w.css"> <p id="mf_weather"> <script src="w.js"></script> <button id="search">天气查询</button> <input id="city" type="text" value="tbody"> <p class="ctn"> <p id="mufeng"> </p> <p id="future"></p> </p> </html>
JavaScript部分：
/* " today.city ' 今天是: ' today.date_y ' ' today.week ' , ' today.temperature ' , ' today.weather ' , ' today.wind " < /p>"); " '未來: ' futur[0].temperature '℃ , ' futur[0].weather futur[0]. wind ' , ' ' , 更新時間' futur[0].week futur[0].date " " today.city " 上面是我整理給大家的，希望今後對大家有幫助。 相關文章： 以上是Ajax 透過城市名獲取數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
* 1.輸入城市名稱
* 2，點擊的時候發送請求
* 3.回應成功渲染頁面
* */
$( '#search').on('click',function(){
var city = $('#city').val()||'北京';
$citycode=urlencode(city);
url='http://v.juhe.cn/weather/index?format=2&cityname=' $citycode '&key=c82727e986a4f6cfc6ba1984f1f9183a';
$.ajax({url: url,
dataType: "jsonp",
type:"get",
data:{location:city},
success:function(data){
var sk = data.result.sk;
var today = data.result.today;
var futur = data.result.future;
var fut = "日期溫度天氣風向";
$('#mufeng').html("
$('#future').html("
} });
});
function urlencode (str) {
str = (str '').toString();
return encodeURIComponent(str).replace(/!/g, '!').replace(/'/g, ''').replace(/\(/g, '(').
replace(/\) /g, ')').replace(/\*/g, '*').replace(/ /g, ' ');
}
})
