快捷導(dǎo)航

jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)服務(wù)示例

更新時(shí)間：2014年02月08日 15:30:41 作者：

本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能,需要的朋友可以參考下

本代碼不涉及任何后端開發(fā)代碼（如.Net，JAVA等）。目前最權(quán)威的天氣預(yù)報(bào)數(shù)據(jù)是中國(guó)天氣網(wǎng)（http://www.weather.com.cn/），因?yàn)檫@個(gè)是官方提供的氣象數(shù)據(jù)，除了商業(yè)的增值服務(wù)外，還提供了免費(fèi)的以JSON數(shù)據(jù)格式返回的氣象數(shù)據(jù)，以查看杭州的天氣數(shù)據(jù)為例，可以輸入以下地址：http://m.weather.com.cn/data/101210101.html ，返回的JSON數(shù)據(jù)格式如下圖：

YQL服務(wù)可以實(shí)現(xiàn)對(duì)網(wǎng)上不同數(shù)據(jù)源的query,filter,combine（查詢，過濾，合并），提供類似SQL，具體地址如下：http://developer.yahoo.com/yql/console/ 。當(dāng)實(shí)施查詢的時(shí)候，YQL服務(wù)就會(huì)訪問網(wǎng)絡(luò)上的數(shù)據(jù)源，傳輸數(shù)據(jù)，返回XML或者JSON形式的數(shù)據(jù)結(jié)果。YQL可以使用許多類型的數(shù)據(jù)源，包括Yahoo!Web services 或者其他的網(wǎng)絡(luò)服務(wù)，和網(wǎng)絡(luò)數(shù)據(jù)類型例如：HTML, XML, RSS,和Atom。

因此可以通過兩者的結(jié)合使用，完成天氣預(yù)報(bào)功能的開發(fā)，具體JS代碼如下：

復(fù)制代碼代碼如下:

function getWeather() {

 $.getJSON("http://query.yahooapis.com/v1/public/yql", {
 q: "select * from json where url=\"http://m.weather.com.cn/data/101210101.html\"",
 format: "json"
 }, function (data) {
 if (data.query.results) {
 //$("#content").text(JSON.stringify(data.query.results));
 var J_data = JSON.parse(JSON.stringify(data.query.results));
 //alert(J_data.weatherinfo.city);
 $("#content").append(""+J_data.weatherinfo.city+"天氣預(yù)報(bào)(數(shù)據(jù)來源中國(guó)天氣網(wǎng))"+"");
 $("#content").append(""+J_data.weatherinfo.date_y+" "+J_data.weatherinfo.week+" "+J_data.weatherinfo.temp1+" "+J_data.weatherinfo.weather1+" "+J_data.weatherinfo.wind1+" "+J_data.weatherinfo.index+" "+J_data.weatherinfo.index_d+"");
 var t= J_data.weatherinfo.date_y;
 t=t.replace("年","/");
 t=t.replace("月","/");
 t=t.replace("日","");

                     var tdy = new Date(t);

                     var t2 = new Date();


                      t2.setDate(tdy.getDate()+1);

$("#content").append(""+ t2.Format("yyyy年MM月dd日")+" "+getweekdays(t2)+" "+J_data.weatherinfo.temp2+" "+J_data.weatherinfo.weather2+" "+J_data.weatherinfo.wind2+"");

 var t3 = new Date();

 t3.setDate(tdy.getDate()+2);
 $("#content").append(""+t3.Format("yyyy年MM月dd日")+" "+getweekdays(t3)+" "+J_data.weatherinfo.temp3+" "+J_data.weatherinfo.weather3+" "+J_data.weatherinfo.wind3+"");

 var t4 = new Date();

 t4.setDate(tdy.getDate()+3);
 $("#content").append(""+t4.Format("yyyy年MM月dd日")+" "+getweekdays(t4)+" "+J_data.weatherinfo.temp4+" "+J_data.weatherinfo.weather4+" "+J_data.weatherinfo.wind4+"");

 var t5 = new Date();

 t5.setDate(tdy.getDate()+4);
 $("#content").append(""+t5.Format("yyyy年MM月dd日")+" "+getweekdays(t5)+" "+J_data.weatherinfo.temp5+" "+J_data.weatherinfo.weather5+" "+J_data.weatherinfo.wind5+"");

var t6 = new Date();

 t6.setDate(tdy.getDate()+5);
 $("#content").append(""+t6.Format("yyyy年MM月dd日")+" "+getweekdays(t6)+" "+J_data.weatherinfo.temp6+" "+J_data.weatherinfo.weather6+" "+J_data.weatherinfo.wind6+"");

//alert(getweekdays(t2));

                } else {
                     $("#content").text('no such code: ' + code);
                 }
             });

          //$.getJSON("http://m.weather.com.cn/data/101210101.html", null, function(json) { alert(json); });

        }