jQueryで郵便番号APIを使う
これで申し分ないんですがひとつできないことがありました。
それはSSLページへの対応。
くじら郵便番号APIのアドレスはhttpから始まりますのでhttpsのページからこのAPIを呼びだそうとしたとき警告が出て？うまいこと動作しませんでした。
そこでまた何かないかなって探してたらいいのがありました。
ajaxzip3 - 郵便番号検索API
これはAPIを提供というよりはスクリプトを利用するかんじ。
ページを見ると使い方も書かれてるのでわかりやすいと思いますがここでも少し紹介。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル - 郵便番号検索API</title>
<script type="text/javascript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="utf-8"></script>
</head>
<body>
郵便番号：
<input type="text" name="zipcode_1" maxlength="3" size="3" />
-
<input type="text" name="zipcode_2" maxlength="4" size="4" onkeyup="AjaxZip3.zip2addr('zipcode_1','zipcode_2','pref','address');" />
<hr />
都道府県：
<input type="text" name="pref" size="10" />
住所：
<input type="text" name="address" size="50" />
</body>
</html>
この例では二番目の郵便番号を入力した際に自動的に郵便番号を検索し、都道府県名および住所を取得・表示するような動きになります。
この関数の引数は
AjaxZip3.zip2addr( '〒上3桁' , '〒下4桁' , '都道府県' , '市区町村', '町域大字' , '丁目番地' )
上のサンプルや本家のページサンプルでは郵便番号検索のトリガーを onkeyup としていますがもちろんボタンを別に用意しといて任意のタイミングで検索することもできます。
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
AjaxZip3.zip2addr('zipcode_1', 'zipcode_2', 'pref', 'address');
});
});
</script>
<input type="text" name="zipcode_1" maxlength="3" size="3" />
-
<input type="text" name="zipcode_2" maxlength="4" size="4" />
<input type="button" id="btn" value="検索" />
簡単！というかそのままですね。
しかし、httpsにも対応してるしjsonpに対応してるのでどこいっても使えるAPIかなと思います。
0 件のコメント:
コメントを投稿