您好,欢迎访问一九零五行业门户网

jquery和雅虎的yql服务实现天气预报服务示例_jquery

本代码不涉及任何后端开发代码(如.net,java等)。目前最权威的天气预报数据是中国天气网(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(+j_data.weatherinfo.city+天气预报(数据来源中国天气网)+
);
                     $(#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); });
}
        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 星期六;
           }
}
最终实现的效果,如下图:
其它类似信息

推荐信息