這是我在部落格園寫的第一篇原創文章，現在直接複制過來了，CSDN 的部落格搬家功能并不好用，隻能手動了。
前幾天沒事的時候，浏覽部落格看到了一篇免費天氣接口的文章，然後調用了一下文章中提到的接口，自己琢磨了半天，把資料處理了一下，雖然現在用不到，但是說不定以後會用，是以打算記錄一下，畢竟這也算是自己第一次在部落格園裡寫出了原創的代碼 （→_→）
進入正題
1.先放接口：
1.1 傳回 json 形式
1.1.1 通過城市名（北京/北京市）擷取目前城市目前溫度及未來一周天氣預報 (Json資料) ：包含台灣的主要縣市
接口：http://wthrcdn.etouch.cn/weather_mini?city=北京市;
1.1.2 通過城市id（101010100）擷取目前城市目前溫度及未來一周天氣預報 (Json資料) ：
接口：http://wthrcdn.etouch.cn/weather_mini?citykey=101010100 ;
1.2 傳回 XML資料 未測試 -我習慣處理json 是以 XML 接口沒測試
1.2.1 通過城市名（北京/北京市）擷取目前城市溫度、濕度、空氣品質主要參數指數、警告、昨日天氣、未來天氣、日出日落時間：
接口：http://wthrcdn.etouch.cn/WeatherApi?city=北京市;
注意：台灣城市及大陸一些城市的空氣品質沒有；
1.2.2 通過城市id（101010100）擷取目前城市溫度、濕度、空氣品質主要參數指數、警告、昨日天氣、未來天氣、日出日落時間：
接口：http://wthrcdn.etouch.cn/WeatherApi?citykey=101010100
關于城市編碼的問題，可以去百度一下，我是覺得用編碼不太友善（=_=） 也找了一個位址：http://download.csdn.net/detail/luckydarcy/9627565 我沒下載下傳，有需要的可以試一下。
聲明： 以下内容為原創内容，如果轉載，請在文章開始或結尾處标注原文位址：http://www.cnblogs.com/benpaodelulu/p/7131303.html
放完接口開始放代碼了，因為我是簡單的測試，是以就很粗暴了 （→_→）
2.代碼：
2.1 PHP 檔案内容:
<?php
function tian(){
$city=$_GET['city']; //接收城市名
$url="http://wthrcdn.etouch.cn/weather_mini?city=".$city;
$str = file_get_contents($url); //調用接口獲得天氣資料
//這一步很重要
$result= gzdecode($str); //解壓
//end
echo $result;
}
tian();
?>
代碼很簡單，需要注意的就是 代碼當中的$str 是接口傳回的天氣資料，它是經過gzip 壓縮的，如果直接傳回 $str 那麼在頁面上的資料是 亂碼，這裡要對$str進行解壓縮，用到php的一個gzdecode()函數。
還有，傳回的資料是json形式的，但是有點難受 (=_=) 它是json形式的字元串A，需要轉化成對象B，對象B裡面還包含對象C,對象C裡包含數組D，數組D裡還包含五個對象E F G H I 。下面就來一步一步解析傳回的資料。
2.2 模版js代碼分析接口傳回資料
2.2.1 直接看ajax，列印傳回資料：
$.ajax({
type: 'GET',
url: "./test.php",
data: {city:city},
datatype: "json", //"xml", "html", "script", "json", "jsonp", "text".
success: function(msg){
console.log(msg);
console.log(Object.prototype.toString.call(msg) )
}
});
列印msg結果如下：
從資料格式來看，很開心，這不就是親切的json嘛，然而并不是。它，隻是一個String類型的字元串。
2.2.2 接着處理傳回資料msg，轉化成對象，再列印一下
$.ajax({
type: 'GET',
url: "./test.php",
data: {city:city},
datatype: "json", //"xml", "html", "script", "json", "jsonp", "text".
success: function(msg){
var data=eval("("+msg+")"); //轉化成對象
console.log(data);
console.log(Object.prototype.toString.call(data) );
}
});
列印結果如下：
msg就是一個對象了，列印的結果顯示，對象的裡data 也是一個對象。點選檢視該對象可知：
對象裡包含城市，空氣品質，天氣品質，目前溫度等資訊，但是具體的資料還是沒有，這個時候又看到了數組 （捂臉哭T_T）。
2.2.3 接着擷取對象data
$.ajax({
type: 'GET',
url: "./test.php",
data: {city:city},
datatype: "json", //"xml", "html", "script", "json", "jsonp", "text".
success: function(msg){
var data=eval("("+msg+")");
$.each(data, function(key, val) {
console.log(val);//列印值
console.log(Object.prototype.toString.call(val));//檢視類型
});
}
});
列印結果如下:
從列印的内容來看，data裡有一個對象類型，一個數字類型，一個字元串類型的值。對比上面 2.2.2 的列印的結果，可以知道
對象類型的值對應的是屬性data，數字類型的值對應的是status，字元串類型對應的值就是desc
這都不重要，重要的是對象類型的值裡有想要的資料。
2.2.4 擷取對象val
在這一步處理的時候，需要進行判斷，因為有用的隻是對象類型的值。
$.each(data, function(key, val) {
if (Object.prototype.toString.call(val) === '[object Object]'){
console.log(val);
var j_city=val.city;
var j_kongqi =val.aqi;
var j_wendu =val.wendu;
var j_ganmao =val.ganmao;
}
});
列印結果如下：
到這裡結果很明顯了，目前這個對象 裡面包含yesterday這個對象，forecast這個數組，以及其他有用的值（目前日期的天氣情況和城市），上面已經将有用的值進行指派。
2.2.5 下面接着擷取yesterday這個對象：
$.each(data, function(key, val) {
if (Object.prototype.toString.call(val) === '[object Object]'){
var j_city=val.city;
var j_kongqi =val.aqi;
var j_wendu =val.wendu;
var j_ganmao =val.ganmao;
$.each(val, function(key1, val1) {
console.log(val1);
});
}
});
列印結果如下：
呐，資料已經出來一大半了，這裡就是yesterday對象的内容，也就是2.2.4中 yesterday對應的Object。 這裡的資訊都是昨天的天氣情況，有用的話可以進行指派。
2.2.6 處理 Array[object，object，object，object，object] 這裡的Array 也就是 2.2.4 列印結果當中的 forecast 包含 未來五天的天氣情況。
處理的方式跟上面一樣，這裡需要數組裡面的對象内容，是以要先判斷是數組然後周遊出裡面的對象，将有用的值進行指派。
$.each(val, function(key1, val1) {
var z_date =val1.date;
var z_fl =val1.fl;
var z_fx =val1.fx;
var z_high =val1.high;
var z_low =val1.low;
var z_type =val1.type;
if(Object.prototype.toString.call(val1) === '[object Array]'){
for(var i=0;i<val1.length;i++){
var m_date=val1[i].date;
var m_high=val1[i].high;
var m_fengli=val1[i].fengli;
var m_low=val1[i].low;
var m_fengxiang=val1[i].fengxiang;
var m_type=val1[i].type;
console.log(val1[i].date)
console.log(val1[i].high)
console.log(val1[i].low)
}
}
});
簡單列印了幾個值，結果如下：
到這裡基本就結束了，剩下的就是根據需求，将資料追加到模版指定位置了。
最後上一張效果圖：
頁面雖然醜了點，但是資料有了就好，啊哈哈，開心 \(＾∀＾)ﾉ
嗯，這個接口就說到這裡啦，一個挂件的第一篇原創。
有點慌 （→_→） 差點忘記放代碼了
2.3 前台模版完整代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf8">
<title>挂件的測試</title>
<script src="./jquery-3.0.0.js"></script>
</head>
<body>
<form action="#">
<table>
<tr>
<td>城市</td>
<td><input id="cheng" type="text" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="查詢" οnclick="cha()"></td>
</tr>
</table>
</form>
<div id="guajian" style="display:none">
城市:<span id="city"></span><br>
空氣品質指數:<span id="kongqi"></span><br>
目前溫度:<span id="wendu"></span><br>
天氣品質:<span id="ganmao"></span><br>
<hr/>
</div>
<div id="guajian_div"></div>
</body>
<script>
function cha(){
var city=$("#cheng").val();
$.ajax({
type: 'GET',
url: "./test.php",
data: {city:city},
datatype: "json", //"xml", "html", "script", "json", "jsonp", "text".
success: function(msg){
var data=eval("("+msg+")");
$.each(data, function(key, val) {
if (Object.prototype.toString.call(val) === '[object Object]'){
var j_city=val.city;
var j_kongqi =val.aqi;
var j_wendu =val.wendu;
var j_ganmao =val.ganmao;
$("#city").text(j_city);
$("#kongqi").text(j_kongqi);
$("#wendu").text(j_wendu);
$("#ganmao").text(j_ganmao);
$("#guajian").show();
$.each(val, function(key1, val1) {
var z_date =val1.date;
var z_fl =val1.fl;
var z_fx =val1.fx;
var z_high =val1.high;
var z_low =val1.low;
var z_type =val1.type;
if(Object.prototype.toString.call(val1) === '[object Array]'){
for(var i=0;i<val1.length;i++){
var m_date=val1[i].date;
var m_high=val1[i].high;
var m_fengli=val1[i].fengli;
var m_low=val1[i].low;
var m_fengxiang=val1[i].fengxiang;
var m_type=val1[i].type;
if (i==0) {
$('#guajian_div').empty();
}
$('#guajian_div').append("<div>日期："+m_date+"<br/>最高溫度："+m_high+"<br/>最低溫度："+m_low+"<br/>天氣："+m_type+"<br/>風力:"+m_fengli+"<br/>風向："+m_fengxiang+"</div> <span>-----by guajian 2017/7/7</span><hr/>");
}
}
});
}
});
}
});
}
</script>
</html> 如果覺得有幫助的話，可以給打賞，手動開心表情包 \(＾∀＾)ﾉ
因為沒有什麼技術含量，是以把圖檔放小點。
又覺得不太合适，就把圖檔改成手動的了(→_→)
手動圖檔：[圖檔]這是圖檔[/圖檔]
手動：[/滑稽][/滑稽][/滑稽]
都看到這裡了， 咦，又看到一個接口網站:http://api.help.bj.cn/api/
手動：[/滑稽][/滑稽][/滑稽]