2012年9月13日木曜日

jQueryで郵便番号APIを使う

JavaScriptでWebAPIを使おうとするとクロスドメインの制限にどうしても引っかかってしまいます。
そこでJSONP。
JSON形式でデータを返してくれる+クロスドメインの制限も解決してくれるJSONPが使えるAPIを探してたらいいかんじのがありました。

クジラ 郵便番号 API
http://api.aoikujira.com/zip/


使い方は簡単です。
<script>
    function search_zipcode() {
        var url = "http://api.aoikujira.com/zip/zip.php";
        url += "?fmt=jsonp&callback=?";
        url += "&zn"+$("#zipcode").val();

        $.getJSON(
            url,
            function(res) {
                var address = "";
                address += res.state;     // 都道府県
                address += res.city;      // 市
                address += res.address;   // 住所
                $("#address").val(address);
            }
        );
    }
</script>
<input type="text" id="zipcode" value="" />
<input type="button" value="住所検索" onclick="search_zipcode();" />
<input type="text" id="address" value="" />

JSONPを使う場合、コールバック関数を指定しますがjQueryでは ? を指定することで処理を置換してくれます。



こんなかんじです。



0 件のコメント:

コメントを投稿