Ajax 透過城市名獲取數據-js教程-PHP中文網

Ajax 透過城市名獲取數據

亚连

發布： 2018-05-23 11:24:27

原創

1761 人瀏覽過

本文跟大家分享全國天氣預報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部分：

/*
* 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("

" today.city ' 今天是: ' today.date_y ' ' today.week ' , ' today.temperature ' , ' today.weather ' , ' today.wind "

< /p>");
$('#future').html("

" '未來: ' futur[0].temperature '℃ , ' futur[0].weather futur[0]. wind ' , ' ' , 更新時間' futur[0].week futur[0].date "

" today.city "");
} });
});
function urlencode (str) {
str = (str '').toString();
return encodeURIComponent(str).replace(/!/g, '!').replace(/'/g, ''').replace(/$/g, '(').
replace(/$ /g, ')').replace(/\*/g, '*').replace(/ /g, ' ');
}
})

上面是我整理給大家的，希望今後對大家有幫助。

Ajax動態為下拉清單新增資料的實作方法

完美解決ajax跨域請求下parsererror的錯誤

ajax提交手機號碼去資料庫驗證並傳回狀態值

以上是Ajax 透過城市名獲取數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！