【jQuery】loadメソッドでlivedoor天気APIの結果を処理して表示する

WebサービスAPIを利用するときは、jQueryのloadを使わず、他のメソッド（ajax、getJSON）を使用したほうが良いのですが、loadメソッドとPHPを使い作成してみました。

IdWeather.php

PHP側では、jQueryのloadのパラメータをPHPで取得するために$_POSTを使用します。リクエストデータを作成してAPIに問い合わせをして返ってきたJSONデータを出力しています。

$city = $_POST['city'];
$base_url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=$city";
$json = file_get_contents($base_url);
$json = mb_convert_encoding($json, 'UTF-8');
print $json;

load.html

loadメソッドにパラメータを設定して、PHPで出力されるJSONデータを読み込んで関数で処理をして結果をdiv#contentに表示するプログラムです。

読み込んだJSONデータは、div#contentに表示されるので、emptyで一旦空ににしています。JSON.parseでJSONデータをJavaScirptで扱えるようにオブジェクトに変換したあと、天気情報をdiv#contentの中に追加して天気を表示します。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
$(function() {
  $('#content').load('IdWeather1.php',{city:130010}, function(data) {
    $(this).empty();
    var data = JSON.parse(data); //JSON.parseではなく$.parseJSONでもok
    $('#content')
    .append('<p>' + data.title)
    .append('<p>' + data.description.text); 
  });
});
</script>