エンジニア足立のコーディング日記

エンジニア足立のコーディング日記

ブログトップへ >> 『2013年7月』の記事一覧

RSS ajaxzip2からajaxzip3へ変えてみました!!

この記事を読むのに掛る所要時間: 412

弊社で日頃からお世話になっているライブラリーといえば、

ajaxzip2です!!

 

フォームのテキストボックスに郵便番号を入力すると、

 

自動で都道府県以下の住所をテキストボックスに反映させてくれるものです。

 

ただ、

 

このライブラリって大量のJSONファイルをサーバー上にアップする必要がありました。

 

が!!!

 

いつの間にかajaxzip3というものが出ていました。

 

ajaxzip2の場合には、

 

前述の大量のJSONファイルアップロードに加え、

 

以下の3行を追加する必要がありました
==========================================================
<script src=”../js/ajaxzip2/prototype.js”></script>
<script src=”../js/ajaxzip2/ajaxzip2.js” charset=”UTF-8″></script>
<script>AjaxZip2.JSONDATA = ‘../js/ajaxzip2/data';</script>
==========================================================

 

しかし、

 

ajaxzip3からは以下の1行を追加するだけで実装できるようになりました。
<script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js” charset=”UTF-8″></script>

 

しかも、

 

以下のURLに変更すればSSLにも対応できます。
https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js

お問合わせフォームなどの作成の際には、

 

セキュリティー上SSLを設定することが多いので非常に助かります!!

 

コードの書き方も簡単で、

 

例えば、

 

郵便番号入力用テキストボックスを1つにし、

住所入力用テキストボックスを「都道府県」「市区町村」「町名以下」の3つ分けたい場合、

以下の様になります。
==========================================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>ajaxzip3</title>
<script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js” charset=”UTF-8″></script>
</script>
</head>
<body>

〒郵便番号:<input type=”text” name=”zip” size=”10″ maxlength=”8″ onChange=”AjaxZip3.zip2addr(‘zip’,”,’pref’,’city’,null,’chome’);”><br><br>

都道府県:<input type=”text” name=”pref”><br>
市区町村:<input type=”text” name=”city”><br>
町名以下:<input type=”text” name=”chome”><br>

</body>
</html>
==========================================================================================

 

※詳しくはajaxzip3のサイトで確認してください。
http://code.google.com/p/ajaxzip3/

このページのTOPへ戻る

著者情報

足立 拓也(あだち たくや)
1980年生まれ。
出身:兵庫県丹波市。
趣味:ボクシングジム通い。
特技:歴史の話しをすること。
一言:頑張って面白いブログを書きます。

月別アーカイブ

  •  

    • [—]2017 (9)
    • [+]2016 (49)
    • [+]2015 (86)
    • [+]2014 (81)
    • [+]2013 (104)
    • [+]2012 (78)
  • カテゴリー