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("<p>"+J_data.weatherinfo.city+"天气预报(数据来源中国天气网)"+"</p>");
                     $("#content").append("<p>"+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+"</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日")+" "+getweekdays(t2)+" "+J_data.weatherinfo.temp2+" "+J_data.weatherinfo.weather2+" "+J_data.weatherinfo.wind2+"</p>");

                       var t3 = new Date();

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

                      var t4 = new Date();

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

                      var t5 = new Date();

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

                      var t6 = new Date();

                      t6.setDate(tdy.getDate()+5);
                      $("#content").append("<p>"+t6.Format("yyyy年MM月dd日")+" "+getweekdays(t6)+" "+J_data.weatherinfo.temp6+" "+J_data.weatherinfo.weather6+" "+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 "星期六";
           }

 

        }

最终实现的效果,如下图:

时间: 2024-09-14 05:23:23

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

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

 本文介绍一个利用Jquery和雅虎的YQL服务实现天气预报功能,需要的朋友可以参考下 本代码不涉及任何后端开发代码(如.Net,JAVA等).目前最权威的天气预报数据是中国天气网(http://www.weather.com.cn/),因为这个是官方提供的气象数据,除了商业的增值服务外,还提供了免费的以JSON数据格式返回的气象数据,以查看杭州的天气数据为例,可以输入以下地址:http://m.weather.com.cn/data/101210101.html ,返回的JSON数据格式如下图

jquery序列化表单以及回调函数的使用示例_jquery

在开发项目中,将前台的值传给后台,有时的JSP表单中的值有一两个,也有全部的值,如果这时一个个传,必定不是很好的办法,所以使用jQuery提供的表单序列化方法,可以很好的解决这个问题,同时可以封装成通用的函数,执行成功可以调用各自的回调函数,实现各自的功能. 代码如下: function queryUserInfo(actionUrl,formId,fun){ var params=new Object(); //声明数组 $.each($("#"+formId).serializeA

jQuery实现类似淘宝购物车全选状态示例_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery使用each方法与for语句遍历数组示例_jquery

本文实例讲述了jQuery使用each方法与for语句遍历数组.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery简单自定义图片轮播插件及用法示例_jquery

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

jquery each的几种常用的使用方法示例_jquery

jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

jquery三个关闭弹出层的小示例_jquery

在开发应用中我们做了一个弹出层,有时我们会做一个关闭按钮,这样点击关闭就可以把弹出层关闭了,但是有时希望只要不点击弹出层内就自动关闭弹出层了,下面我总结了三个实例.例1 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

jquery ready函数、css函数及text()使用示例_jquery

复制代码 代码如下: <script type="text/javascript" src="/javascript/jquery.js"></script> <script language="javascript"> $("#CheckoutStepShippingProvider").ready(function(){ if($("#Note_52413376ea55e_1&

jQuery封装的获取Url中的Get参数示例_jquery

js的纯前台处理时会遇到将一个网页的参数,通过get方式,传递给下一个页面的问题. 此时可以使用js的方式得到当前页面的url中的get参数. 核心语句是: window.location.href 详细代码不解释了,有注释,你看了就懂.封装成jQuery扩展包. 复制代码 代码如下: (function($){ $.extend({ /** * url get parameters * @public * @return array() */ urlGet:function() { var a