摘要:透過Jquery利用YQL解取中央氣象局網頁內容
最近發現利用YAHOO 所提供之API YQL 也可以輕鬆達到擷取網頁內容!
顧名思義(Yahoo Query Language)就是透過熟悉得SQL Command就可以達成,
使用上並不會太麻煩.
故在此就當作一個紀錄,往後或許自己也用得到.
下列就是爬取中央氣象局得範例.
當然文章當中有甚麼不好的地方,也請前輩提出指導!
首先在上一篇文章中,有介紹到XPATH使用方式,
在此時也派的上用場,
因為在YQL中,在WHERE條件中,可以透過XPATH來取得節點.
當然可以先在此 YAHOO console 中先行組出語法
下列是組出爬取中央氣象局網頁的範例
select * from html
where url='http://www.cwb.gov.tw/V7/forecast/f_index.htm' //預擷取之網址
and xpath='//tr[@id="KeelungList"]' //XPATH節點
最後透過送出置YAHOO 所提供API位置
https://query.yahooapis.com/v1/public/yql?
q= <為組出得查詢條件,必要先行透過encodeURIComponent編碼
format=<指定輸出格式json,xml,Rss....etc
產出的網址位置
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D"http%3A%2F%2Fwww.cwb.gov.tw%2FV7%2Fforecast%2Ff_index.htm"%20and%0A%20%20%20%20%20%20xpath%3D%27%2F%2Ftr%5B%40id%3D"KeelungList"%5D%27&format=json
畫面如下:
所以現在已經爬出我要的資料了,
就可以放在我想呈現的地方嚕!
直接透過 $.getJSON得方法將資料直接取回來在網頁上,
在做呈現得動作.
畫面如下
最後附上原始碼與線上範例
再請各位參考嚕
如果寫得不好或者有需要改進的地方再各位前輩請多多指教
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YQL-擷取中央氣象局範例</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var jsonCity = {
"results": {
"table": [
{
"city": {
"id": "KeelungList",
"name": "基隆市"
}
},
{
"city": {
"id": "TaipeiCityList",
"name": "臺北市"
}
},
{
"city": {
"id": "TaipeiList",
"name": "新北市"
}
},
{
"city": {
"id": "TaoyuanList",
"name": "桃園縣"
}
},
{
"city": {
"id": "HsinchuCityList",
"name": "新竹市"
}
},
{
"city": {
"id": "HsinchuList",
"name": "新竹縣"
}
},
{
"city": {
"id": "MiaoliList",
"name": "苗栗縣"
}
},
{
"city": {
"id": "TaichungList",
"name": "臺中市"
}
},
{
"city": {
"id": "ChanghuaList",
"name": "彰化縣"
}
},
{
"city": {
"id": "NantouList",
"name": "南投縣"
}
},
{
"city": {
"id": "YunlinList",
"name": "雲林縣"
}
},
{
"city": {
"id": "ChiayiCityList",
"name": "嘉義市"
}
},
{
"city": {
"id": "ChiayiList",
"name": "嘉義縣"
}
},
{
"city": {
"id": "YilanList",
"name": "宜蘭縣"
}
},
{
"city": {
"id": "HualienList",
"name": "花蓮縣"
}
},
{
"city": {
"id": "TaitungList",
"name": "臺東縣"
}
},
{
"city": {
"id": "TainanList",
"name": "臺南市"
}
},
{
"city": {
"id": "KaohsiungCityList",
"name": "高雄市"
}
},
{
"city": {
"id": "PingtungList",
"name": "屏東縣"
}
},
{
"city": {
"id": "MatsuList",
"name": "連江縣"
}
},
{
"city": {
"id": "KinmenList",
"name": "金門縣"
}
},
{
"city": {
"id": "PenghuList",
"name": "澎湖縣"
}
}
]
}
};
</script>
<script>
/*下拉縣市清單*/
var appendSelectCity = function () {
$.each(jsonCity.results.table, function (i, item) {
$("#city").append('<option id="' + item.city.id + '">' + item.city.name + '</option>');
});
}
/*下拉觸發事件*/
var changSel = function (ele) {
//
var Cityid = $(ele).find("option:selected").attr('id');
if ($('table>td').length == 4) {
$('table>td').fadeOut(500, function () { $(this).remove(); });
GetWeatherData(Cityid);
}
}
/*透過YQL取得氣象資料*/
var GetWeatherData = function (cityId) {
var BasicQueryUrl = 'http://query.yahooapis.com/v1/public/yql?'
var query = 'q=' +
encodeURIComponent('select * from html where ' +
' url = "http://www.cwb.gov.tw/V7/forecast/f_index.htm" and ' +
'xpath=' + "'" + '//tr[@id="' + cityId + '"]' + "'") + '&format=json';
$.getJSON(BasicQueryUrl + query, function (data) {
var Infohtml = '';
var ImagUrl = '';
//取得圖片,在最後一個元素
var lastImglength = data.query.results.tr.td.length - 1;
$.each(data.query.results.tr.td, function (i, val) {
if (val.a.content != undefined) {
var name = '';
switch (i) {
case 0:
name = "縣市";
break;
case 1:
name = "溫度";
break;
case 2:
name = "降雨機率";
break;
}
Infohtml += '<td width="100px;"><p>' + name + '</p>' + val.a.content + '</td>';
}
});
var iurl = data.query.results.tr.td[lastImglength].div.a.img.src;
ImagUrl += ' <td width="100px;">' +
' <div class="spic">' +
' <img src="http://www.cwb.gov.tw' + iurl + '" width="45" height="45" border="0">' +
' </div>' +
' </td>';
$("table").append(Infohtml + ImagUrl);
});
}
$(function () {
/*初始化取得*/
appendSelectCity();
/*預設值*/
GetWeatherData('KeelungList');
});
</script>
<body>
<form>
<p>請選擇地區:</p>
<select id="city" onchange="changSel(this)">
</select>
<table>
<!-- 放置內容區域-->
</table>
</form>
</body>
</html>