jquery and Yahoo's YQL services to implement the weather forecast service example _jquery

This code does not involve any back-end development code (such as. Net,java, etc.). The most authoritative weather forecast is the Chinese Weather Network (http://www.weather.com.cn/), because this is the official meteorological data, in addition to commercial value-added services, but also provides a free JSON data format to return the weather data to view the weather data in Hangzhou, for example, You can enter the following address: Http://m.weather.com.cn/data/101210101.html, the returned JSON data format is shown below:

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

Therefore, we can use the combination of the two to complete the development of the weather forecast function, the specific JS code is as follows:

Copy Code code as follows:

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+) weather forecast (data source 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 ("Year", "/");
T=t.replace ("Month", "/");
T=t.replace ("Day", "");

                      var tdy = new Date (t); 

                      var t2 = new Date ();       

                   
                       t2.setdate (Tdy.getdate () +1);

                    

$ ("#content"). Append ("<p>" + T2. Format ("YYYY year mm month DD Day") + "" +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 year mm month DD Day") + "" +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 year mm month DD Day") + "" +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 year mm month DD Day") + "" +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 year mm month DD Day") + "" +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 "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 effect of the final implementation, as shown in the following figure: