Jquery和雅虎的YQL服務實作天氣預報功能！

     很多外部網站都有天氣預報功能，對于很多企業内部的門戶也需要有天氣預報功能，但實作天氣預報的功能和方式确有所差異，本文介紹一個利用Jquery和雅虎的YQL服務實作天氣預報功能，不涉及任何後端開發代碼（如.Net，JAVA等），并在本人之前開發的移動OA網站上使用。目前最權威的天氣預報資料是中國天氣網（http://www.weather.com.cn/），因為這個是官方提供的氣象資料，除了商業的增值服務外，還提供了免費的以JSON資料格式傳回的氣象資料，以檢視杭州的天氣資料為例，可以輸入以下位址：http://m.weather.com.cn/data/101210101.html ，傳回的JSON資料格式如下圖：

    YQL服務可以實作對網上不同資料源的query,filter,combine（查詢，過濾，合并），提供類似SQL，具體位址如下：http://developer.yahoo.com/yql/console/ 。當實施查詢的時候，YQL服務就會通路網絡上的資料源，傳輸資料，傳回XML或者JSON形式的資料結果。YQL可以使用許多類型的資料源，包括Yahoo!Web services 或者其他的網絡服務，和網絡資料類型例如：HTML, XML, RSS,和Atom。

       是以可以通過兩者的結合使用，完成天氣預報功能的開發，具體JS代碼如下：

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("<p>"+J_data.weatherinfo.city+"天氣預報(資料來源中國天氣網)"+"</p>");
                     $("#content").append("<p>"+J_data.weatherinfo.date_y+"&nbsp;"+J_data.weatherinfo.week+"&nbsp;"+J_data.weatherinfo.temp1+"&nbsp;"+J_data.weatherinfo.weather1+"&nbsp;"+J_data.weatherinfo.wind1+"&nbsp;"+J_data.weatherinfo.index+"&nbsp;"+J_data.weatherinfo.index_d+"</p>");
                     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("<p>"+ t2.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t2)+"&nbsp;"+J_data.weatherinfo.temp2+"&nbsp;"+J_data.weatherinfo.weather2+"&nbsp;"+J_data.weatherinfo.wind2+"</p>");
                      
                       var t3 = new Date();
                   
                      t3.setDate(tdy.getDate()+2);
                      $("#content").append("<p>"+t3.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t3)+"&nbsp;"+J_data.weatherinfo.temp3+"&nbsp;"+J_data.weatherinfo.weather3+"&nbsp;"+J_data.weatherinfo.wind3+"</p>");
                                    
                      var t4 = new Date();
                   
                      t4.setDate(tdy.getDate()+3);
                      $("#content").append("<p>"+t4.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t4)+"&nbsp;"+J_data.weatherinfo.temp4+"&nbsp;"+J_data.weatherinfo.weather4+"&nbsp;"+J_data.weatherinfo.wind4+"</p>");
                              
                      var t5 = new Date();
                   
                      t5.setDate(tdy.getDate()+4);
                      $("#content").append("<p>"+t5.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t5)+"&nbsp;"+J_data.weatherinfo.temp5+"&nbsp;"+J_data.weatherinfo.weather5+"&nbsp;"+J_data.weatherinfo.wind5+"</p>");

                      var t6 = new Date();
                   
                      t6.setDate(tdy.getDate()+5);
                      $("#content").append("<p>"+t6.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t6)+"&nbsp;"+J_data.weatherinfo.temp6+"&nbsp;"+J_data.weatherinfo.weather6+"&nbsp;"+J_data.weatherinfo.wind6+"</p>");



                     //alert(getweekdays(t2)); 

                } else {
                     $("#content").text('no such code: ' + code);
                 }
             });
                         
          //$.getJSON("http://m.weather.com.cn/data/101210101.html", null, function(json) { alert(json); });             
           
        }

        function getweekdays(datey)
        {
           if(datey.getDay()==0)
           {
             return "星期日";
           }
           else if(datey.getDay()==1)
           {
              return "星期一";
           }
           else if(datey.getDay()==2)
           {
              return "星期二";
           }
           else if(datey.getDay()==3)
           {
              return "星期三";
           }
           else if(datey.getDay()==4)
           {
              return "星期四";
           }
           else if(datey.getDay()==5)
           {
              return "星期五";
           }
           else if(datey.getDay()==6)
           {
              return "星期六";
           }



        }      

          最終實作的效果，如下圖：

本部落格為軟體人生原創，歡迎轉載，轉載請标明出處：http://www.cnblogs.com/nbpowerboy/p/3364786.html。演繹或用于商業目的，但是必須保留本文的署名軟體人生（包含連結）。如您有任何疑問或者授權方面的協商，請給我留言。