jqueryとYahooのyqlで実装した天気予報サービスの例 service_jquery

このコードには、バックエンド開発コード (.Net、JAVA など) は含まれません。現在、最も権威のある天気予報データは中国気象網 (http://www.weather.com.cn/) です。これは商業的な付加価値のある気象データに加えて公式に提供されているためです。サービスでは、JSON データ形式で返される無料の気象データも提供されます。杭州の気象データを例として、次のアドレスを入力できます: http://m.weather.com.cn/data/101210101.htmlデータ形式は次のとおりです 写真:

YQL サービスは、インターネット上のさまざまなデータ ソースに対してクエリ、フィルター、結合 (クエリ、フィルター、マージ) を実装でき、同様の SQL を提供します。具体的なアドレスは次のとおりです: http://developer.yahoo.com。 /yql/コンソール/。クエリを実行すると、YQL サービスはネットワーク上のデータ ソースにアクセスし、データを送信し、データ結果を XML または JSON の形式で返します。 YQL は、Yahoo! Web サービスやその他のネットワーク サービス、HTML、XML、RSS、Atom などのネットワーク データ タイプを含む、さまざまなタイプのデータ ソースを使用できます。

したがって、この 2 つを組み合わせることで天気予報機能の開発が完了します。具体的な 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 "Sunday";
}
else if(datey. getDay()==1)
return "月曜日"; return "火曜日" ;
}
else if(datey.getDay()==3)
{
return "水曜日" ;
}
else if（datey.getDay（）== 4; return "金曜日";
}
else if（datey.getDay（）== 6）



}



最終的な効果は以下のようになります: