住所入力
郵便番号をハイフンを含めて8桁入力すると、自動的に住所が表示されます。
(手順)
(1)onKeyUpイベントを検知するたびに入力文字数を検査する。
(2)所定の文字数になったらPHPスクリプトに通信して、該当の住所を得る。
(3)PHPスクリプトでは、データベースより該当住所を検索する。(現状では数件しか入っていません。)
<![CDATA[
function tryAjax(){
if ($F("postcode").length == 8){
uri = "zip.php";
data = Form.serialize("form01");
options = {method: "post",
parameters: data,
onComplete:ajaxRequest};
new Ajax.Request(uri, options);
}
}
function ajaxRequest(myRequest){
$("addr").value = myRequest.responseText;
}
]]>
<![CDATA[
<p>郵便番号から入力してください。例：112-0001〜6,112-0011〜15</p>
<form id="form01">
郵便番号<input type="text" name="postcode" id="postcode" size="10" onKeyUp="tryAjax();return false;"><br>
住所<input type="text" name="addr" id="addr" value="" size="60">
</form>
]]>
PHPファイル
◎Ajaxで使用する文字コードはUTF8ですので、サーバもデータベースもUTF8に揃えていれば文字化けの心配はありません。
当サイトではサーバ、DBともにEUC-JPですので、スクリプト内でUTF8に変換しています。
（PHPスクリプトはUTF8で記述）
・サーバ側の変換：mb_internal_encoding("UTF-8");
・DB値の変換：$db = mb_convert_encoding($row['adr'], 'UTF-8', 'EUC-JP');
（注）mb_convert_encodingの引数には、DB値を直接指定します。
$db = $row['adr'];
$db = mb_convert_encoding($db, 'UTF-8', 'EUC-JP');
のように一旦変数に代入すると、代入した時点で文字化けしてしまうようです。
<![CDATA[
＜?php
define("HOST","localhost");
define("DBNAME","testDB");
define("USER","user");
define("PASS","pass");
// 内部コードをUTF8にする
mb_internal_encoding("UTF-8");
$BOM = "\xef\xbb\xbf";
$hcode = $_POST["postcode"];
$acode = split("-", $hcode);
$code = $acode[0].$acode[1];
$conn = mysql_connect(HOST, USER, PASS) or die("接続エラー");
mysql_select_db(DBNAME, $conn);
$res = mysql_query("SELECT * FROM zip WHERE code = $code", $conn);
$row = mysql_fetch_array($res, MYSQL_ASSOC);
// DBの値をUTF8に変換する
$db = mb_convert_encoding($row['adr'], 'UTF-8', 'EUC-JP');
echo $BOM.$db;
mysql_close($conn);
?>
]]>
＜参考＞ボタン押下で通信
数万件のデータ検索など、トラフィックの状況によって通信に遅れが生じる場合は、ボタン押下による通信にした方が良いでしょう。
<![CDATA[
function tryAjax(){
uri = "zip.php";
data = Form.serialize("form01");
options = {method: "post",
parameters: data,
onComplete:ajaxRequest};
new Ajax.Request(uri, options);
}
function ajaxRequest(myRequest){
$("addr").value = myRequest.responseText;
}
]]>
<![CDATA[
<p>郵便番号から入力してください。例：112-0001〜6,112-0011〜15</p>
<form id="form01">
郵便番号<input type="text" name="postcode" id="postcode" size="10">
<input type="button" name="button01" id="button01" value="住所検索" onClick="tryAjax();return false;"><br>
住所<input type="text" name="addr" id="addr" value="" size="60">
</form>
]]>
