Jquery and yahoo's yql service implement the weather forecast service example

  • 2020-03-30 01:37:59
  • OfStack

This code does not involve any back-end development code (e.g..net, JAVA, etc.). Currently the most authoritative weather forecast data is China weather network ((link: http://www.weather.com.cn/)), because this is the official to provide weather data, in addition to business value-added services, also provides free returned in the JSON data format of meteorological data, to see the weather in hangzhou as an example, the data can enter the following address: http://m.weather.com.cn/data/101210101.html, the returned JSON data format is as follows:

YQL service can be achieved for different data sources online query, filter, combine (query, filtering, merging), provides a similar SQL, specific address is as follows: http://developer.yahoo.com/yql/console/. When a query is executed, the YQL service accesses data sources on the network, transmits data, and returns data results in XML or JSON form. YQL can use many types of data sources, including Yahoo! Web services or other Web services, and Web data types such as HTML, XML, RSS, and Atom.

Therefore, through the combination of the two, the development of the weather forecast function can be completed. The specific JS code is as follows:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201402/20140208152412.jpg? 20141815276 ">

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) {
                    var J_data = JSON.parse(JSON.stringify(data.query.results));
                       $("#content").append("<p>"+J_data.weatherinfo.city+" The weather forecast ( Data from China weather network )"+"</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(" years ","/");
                     t=t.replace(" month ","/");
                     t=t.replace(" day ","");
                     var tdy = new Date(t);  

                     var t2 = new Date();       


                      $("#content").append("<p>"+ t2.Format("yyyy years MM month dd day ")+" "+getweekdays(t2)+" "+J_data.weatherinfo.temp2+" "+J_data.weatherinfo.weather2+" "+J_data.weatherinfo.wind2+"</p>");

                       var t3 = new Date();

                      $("#content").append("<p>"+t3.Format("yyyy years MM month dd day ")+" "+getweekdays(t3)+" "+J_data.weatherinfo.temp3+" "+J_data.weatherinfo.weather3+" "+J_data.weatherinfo.wind3+"</p>");

                      var t4 = new Date();

                      $("#content").append("<p>"+t4.Format("yyyy years MM month dd day ")+" "+getweekdays(t4)+" "+J_data.weatherinfo.temp4+" "+J_data.weatherinfo.weather4+" "+J_data.weatherinfo.wind4+"</p>");

                      var t5 = new Date();

                      $("#content").append("<p>"+t5.Format("yyyy years MM month dd day ")+" "+getweekdays(t5)+" "+J_data.weatherinfo.temp5+" "+J_data.weatherinfo.weather5+" "+J_data.weatherinfo.wind5+"</p>");
                      var t6 = new Date();

                      $("#content").append("<p>"+t6.Format("yyyy years MM month dd day ")+" "+getweekdays(t6)+" "+J_data.weatherinfo.temp6+" "+J_data.weatherinfo.weather6+" "+J_data.weatherinfo.wind6+"</p>");
                } else {
                     $("#content").text('no such code: ' + code);

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

        function getweekdays(datey)
             return " Sunday ";
           else if(datey.getDay()==1)
              return " Monday ";
           else if(datey.getDay()==2)
              return " Tuesday ";
           else if(datey.getDay()==3)
              return " Wednesday ";
           else if(datey.getDay()==4)
              return " Thursday ";
           else if(datey.getDay()==5)
              return " Friday ";
           else if(datey.getDay()==6)
              return " Saturday ";

The final result is as follows:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201402/20140208152541.jpg? 201418152733 ">

Related articles: