JSONP を使った郵便番号・住所　変換 #jQuery

https://zipcloud.ibsnet.co.jp の API を JSONP で使う方法です。

実行結果

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="zipcode.js"></script>
<title>zipcode (Oct/18/2020)</title>
</head>
<body>
<h2>zipcode</h2>

<table>
<tr>
<td><p>郵便番号</p></td>
<td><input type="text" id="postal1" size=6/ > 
- <input type="text" id="postal2" size=7 />
<br>
<button id="button_zip">郵便番号から住所入力</button>
</td>
</tr>
<tr>
<td><p>住所（都道府県）</p></td>
<td>
<input type="text" id="pref" style="width: 148px" />
</td>
</tr>
<tr>
<td><p>住所（市町村）</p></td>
<td>
<input type="text" id="city" style="width: 215px" />
</td>
</tr>
<tr>
<td><p>住所（番地）</p></td>
<td>
<input type="text" id="town" style="width: 209px" />
</td>
</tr>
</table>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Oct/18/2020 PM 15:18<p />
</body>
</html>

zipcode.js

// -----------------------------------------------------------------------
//  zipcode.js
//
//                      Oct/18/2020
//
// -----------------------------------------------------------------------
jQuery (function ()
{
    jQuery("#outarea_aa").text  ("*** zipcode *** start ***")

    button_zip_click_monitor ()

    jQuery("#outarea_hh").text ("*** zipcode *** end ***")
})

// -----------------------------------------------------------------------
// [8]:
function button_zip_click_monitor ()
{
    jQuery ("#button_zip").click (function ()
        {
        jQuery ("button").css ("color","black")
        jQuery ("#" + this.id).css ("color","blue")

        jQuery ("#outarea_bb").text ("this.id = " + this.id)

        const postal1 = jQuery("#postal1").val()
        const postal2 = jQuery("#postal2").val()
        const zipcode = "" + postal1 + postal2

        var str_tmp = ""
        str_tmp += "postal1 = " + postal1 + "<br />"
        str_tmp += "postal2 = " + postal2 + "<br />"
        str_tmp += "zipcode = " + zipcode + "<br />"
        jQuery ("#outarea_cc").html (str_tmp)

        const url_zip = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipcode + "&callback=?"

        jQuery.getJSON(url_zip,function (data)
            {
            jQuery ("#outarea_dd").text (JSON.stringify(data["results"]))
//          jQuery ("#outarea_dd").text (data)
            const unit = data["results"][0]
            var str_out = ""
            str_out += "pref: " + unit['address1'] + '<br />' 
            str_out += "city: " + unit['address2'] + '<br />' 
            str_out += "town: " + unit['address3'] + '<br />' 
            jQuery ("#outarea_ee").html (str_out)

            jQuery ("#pref").val (unit['address1'])
            jQuery ("#city").val (unit['address2'])
            jQuery ("#town").val (unit['address3'])
            })
        })
}

// -----------------------------------------------------------------------

JSONP を使った 郵便番号・住所 変換

JSONP を使った郵便番号・住所　変換