Button
      Button

        jsonをjquery（ajax）で取得→表示

        ヤスゾ

        某サイトに、天気予報としてworldweatheronlineのAPIつこうてみる。
        wwonline1
        ↑こんなん感じ

        他にもAPIを数種類つかってるけど、認証関係や返される形式の都合でPHPに処理してもらってた。
        今回は特に障害もなさげだったので定番（らしい）のjquery（ajax）でjson処理することに。

        使ったのはhttp://www.worldweatheronline.com/
        無料だったのと、リファレンス関係あったからなんとなく。
        ドキュメントはhttp://developer.worldweatheronline.com/documentation
        あたりご確認願います。

        で、以下みたいなので動いたり。

        $.ajax({
    url: "http://api.worldweatheronline.com/free/v1/weather.ashx?q=緯度経度とか&format=json&num_of_days=日数&key=取得したキー",
	dataType: 'jsonp',//データはjsonpだよ
	timeout : 2000,//タイムアウトを2秒に設定
}).done(function(data) {
		$("#weather img").css("display","none");//ローディング消す
		$.each(data.data.weather, function(i,val) {
			$("<div/>")
			.append((val.date).slice(-2) + "日")
			.append("<br/>")
			.append($("<img/>").attr("src", val.weatherIconUrl[0].value))
			.append("<br/>")
			.append("<span class='max'>" + val.tempMaxC + "℃</span>")
			.append("<br/>")
			.append("<span class='min'>" + val.tempMinC + "℃</span>")
			.appendTo("#weather");
		});
}).fail(function() {
	$("#weather").html("チョットお休みかも…");
});

        簡単な流れとしては…
        個別に設定してる緯度経度とかAPIキーを、ajaxのurlオプションで渡す
        ↓
        done（successとかもOK）で成功時の処理を、
        fail（errorとかもOK）で失敗時の処理をってーことみたい。
        ↓
        eachで個数回す的な。
        返ってきてるデータをCSSで整形して表示。
        画像返すのあったから天気マーク作らず済んだった

        たまーに503でるけど放置ｗ
        いろいろ怪しいとこもあると思うので、もし参考にされる場合は「ご利用は計画的に」って奴です。

        [amazonjs asin=”4627847327″ locale=”JP” tmpl=”Small” title=”Webアプリケーション構築入門(第2版) – 実践! Webページ制作からマッシュアップまで”]

        Related Posts