HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

入力した郵便番号をから住所を「郵便番号住所検索サービス」を利用して取得し表示します。

郵便番号:

住所の構成を指定してください。
分割なし
都道府県と住所の2分割
都道府県、市区郡、町村域の3分割

コード


$(function(){
    $('#search').click(function(){
        var zipcode = document.zipsearch.zipcode.value;
        
        if (zipcode.match(/^\d{3}-?\d{4}$/) ||
            zipcode.match(/^\d{3}$/)) {
            var zip = document.zipsearch.elements['zipcode'].value;
            zip = zip.replace("-", "");

            var opt = 0;
            for (i = 0; i < document.zipsearch.opt.length; i++) {
                if (document.zipsearch.opt[i].checked) {
                    opt = document.zipsearch.opt[i].value;
                    break; // exit for.
                }
            }

            $.ajax({
                type: "GET",
                url: "http://www.northwind.mydns.jp/samples/webservice/getaddress/" + zip + "/" + opt,
                dataType: "text",
                success: function (res) {
                    $('#result').text(res);
                },
                error: function(xhr, exception) {
                    if (xhr.status === 0) {
                        alert('接続していません。\n ネットワークを確認してください。');
                    } else if (xhr.status == 404) {
                        alert('要求されたページが見つかりません。 [404]');
                    } else if (xhr.status == 500) {
                        alert('内部サーバー エラー [500].');
                    } else if (exception === 'parsererror') {
                        alert('要求された JSON の解析に失敗しました。');
                    } else if (exception === 'timeout') {
                        alert('タイムアウトしました。');
                    } else if (exception === 'abort') {
                        alert('Ajax 要求が異常終了しました。');
                    } else {
                       alert('予期しないエラーが発生しました。\n' + xhr.responseText);
                    }
                }
            });
        } else {
            alert("郵便番号を3桁以上を入力してください。(例;123-1234, 1231234 または 123)");
            return false;
        }
        return true;
    });
});
    

HTMLコード


<form name="zipsearch" action="#" method="GET">
    <p>郵便番号: <input type="text" id="zipcode" name="zipcode" size=12 maxlength=8 value=""/>
    <button type="button" id="search">検索</button></p>
    <p>住所の構成を指定してください。<br />
        <input type="radio" name="opt" value="0" checked>分割なし<br />
        <input type="radio" name="opt" value="2" >都道府県と住所の2分割<br />
        <input type="radio" name="opt" value="3" >都道府県、市区郡、町村域の3分割<br />
    </p>    
</form>
<p>
    <textarea id="result" wrap="hard" rows="10" style="width: 468px" readonly >
    </textarea>
</p>
    

関連リンク