Ajax：郵便番号検索APIを使って郵便番号検索を実装する

2017年7月16日2017年10月12日

最近では当たり前になっている郵便番号検索ですが、完全に自前でやろうと思うと

DBの知識
サーバーサイドの知識
jQueryなどを使ったAjaxの知識
郵便番号データの定期的な更新

などが必要で意外と大変だったりします。

もっと簡単に実装したい方のために、Ajaxの知識だけで郵便番号検索できる方法を紹介します。

実装方法

今回使うもの

郵便番号API
jQuery

を今回は使います。

郵便番号APIはzipcloudを利用します。
このAPIは郵便番号を送信するとJson形式で郵便番号に該当する住所を返信してくれる便利なサービスです。
定期的に住所情報もメンテナンスしてくれているので、常にほぼ最新のデータを取得することができます。

コード

では実際に実装してみましょう。

まず、jQuery本体を読み込みます。

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

郵便番号の入力ボックスと、検索結果を表示する領域を記述します。

<h1>郵便番号</h1>
<!-- 郵便番号入力のテキストボックス -->
<input type="text" id="zipcode" value="" maxlength="7">
<input type="button" id="search_btn" value="検索">
<p>※7桁の半角数字で入力してください</p>

<!-- 検索結果の表示エリア -->
<div id="zip_result"></div>

郵便番号を検索するスクリプトを記述します。
検索ボタンをクリックしたときに、zipcloudに郵便番号を送信して結果を取得します。

$(function () {
    //検索ボタンをクリックされたときに実行
    $("#search_btn").click(function () {
        //入力値をセット
        var param = {zipcode: $('#zipcode').val()}
        //zipcloudのAPIのURL
        var send_url = "http://zipcloud.ibsnet.co.jp/api/search";
        $.ajax({
            type: "GET",
            cache: false,
            data: param,
            url: send_url,
            dataType: "jsonp",
            success: function (res) {
                //結果によって処理を振り分ける
                if (res.status == 200) {
                    //処理が成功したとき
                    //該当する住所を表示
                    var html = '';
                    for (var i = 0; i < res.results.length; i++) {
                        var result = res.results[i];
                        console.log(res.results);
                        html += '<h2>住所' + (i + 1) + '</h2>';
                        html += '<div>都道府県コード：' + result.prefcode + '</div>';
                        html += '<div>都道府県：' + result.address1 + '</div>';
                        html += '<div>市区町村：' + result.address2 + '</div>';
                        html += '<div>町域：' + result.address3 + '</div>';
                        html += '<div>都道府県(カナ)：' + result.kana1 + '</div>';
                        html += '<div>市区町村(カナ)：' + result.kana1 + '</div>';
                        html += '<div>町域(カナ)：' + result.kana1 + '</div>';
                    }
                    $('#zip_result').html(html);
                } else {
                    //エラーだった時
                    //エラー内容を表示
                    $('#zip_result').html(res.message);

                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
            }
        });
    });
});

[btn class=”rich_pink”]デモ確認[/btn]