締切済み

Jquery　を使った住所情報の自動入力

2011/04/19 15:26

PHPにて会員情報入力フォームを作っています。住所情報は、Jqueryを使い、入力された郵便番号から自動的に補完させようとしています。・http://tabtab.egoism.jp/blog/2011/02/21/jquery-zip2addr%E3%81%A7%E9... ・http://blog.eggrice.com/?p=25 ＝＞jquery.zip2addr.js を使用する例はいくつか見つけました。 DBには、日本郵便のサイトから取得した KEN_ALL.CSV　を登録済です。 DBから取得して、自動補完を実現する方法が分かりません。 Jqeryはど素人なので、参考になるようなサイト（DBから取得する）、もしくは方法をご存知の方がおりましたら、どなたかご教示頂けないでしょうか？

noname#152215

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

narative_h
ベストアンサー率47% (17/36)

2011/04/20 11:58 回答No.2

実際に作成していないので断言できませんがAjaxで作成できそうです。仕組みとしておおまかに書くと、１　フォームに郵便番号の値を入力２　jqueryを利用してデータベースと連帯するPHPにその値を送る（ここで住所などをゲット）３　２で取得した住所を1のフォーム画面へ画面遷移せずに送るここでは簡単にフォームで入力した値をPHP側でちょっとした処理を行い返す動作を紹介します。まずはフォーム側 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQueryのテスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#submit_bt").click(function(e){  e.preventDefault();  ajax_php(); }); }); function ajax_php(){ var word_val=$("#word_id").val();  $.post("./test.php", {word : word_val}, function(data){ $("#php_word").html(data); }) } </script> <head> <body> <form id ="watasu" method="post"> <input type="text" name="word" id="word_id" /> <input type="submit" value="渡す" id="submit_bt" /> </form> <div id="php_word"></div> </body> </html> 次にPHP側（上記のHTMLファイルと同じ階層に配置してます）ファイル名 test.php <?php $word = $_POST['word']; $a = $word."を入力しました"; echo <<<EOM <h1>$a</h1>　 EOM; ?> PHPファイルを見てもらえばわかるように、フォームに「あ」と入力して渡すボタンを押すと「あを入力しました」という文字列が画面遷移せずに表示されると思います。これと同じ原理でPHP側でデータベース処理して結果を表示させればいいと思います。 ajax php　連帯　などとぐぐったり、参照URLのAjax編を見ていくつか動作を試してみれば感覚がつかめると思います。