php 調用天氣接口
前幾天沒事的時候，瀏覽博客看到了一篇免費天氣接口的文章，然後調用了一下文章中提到的接口，自己琢磨了半天，把數據處理了一下，雖然現在用不到，但是說不定以後會用，所以打算記錄一下，畢竟這也算是自己第一次在博客園裏寫出了原創的代碼 （→_→）
進入正題
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 lang="en">
<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="查詢" onclick="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>
如果覺得有幫助的話，可以給打賞，手動開心表情包 \(＾?＾)?
因為沒有什麽技術含量，我把圖片放小點 （=_=）
php 調用天氣接口