【jQuery】郵便番号を入力するとAjaxとPHPで県情報を表示
よく、入力フォーム等である、「郵便番号」を入れると自動的に「県」と「市町村」が入力される機能をAjaxとPHPで作成しました。
データは郵便局のCSVデータを使用しています。
郵便番号データダウンロード
以下のコードはCSVをそのまま使用していますが、データベースに格納して使用するともう少し動作が早くなると思います。
【デモ】
【HTML】
【CSS】
【jQuery】
【cheack1.php】
簡単な流れを説明すると、郵便番号を入力するとAjaxでページ遷移せずに郵便番号のCSVをチェックしjQueryでプルダウンとセレクトボックスの内容を変更しています。
入力フォームはユーザビリティにも大事な部分です。なるべく、ストレスなく入力できるよう、いろいろな機能をつけると、離脱がすくなると思います。
データは郵便局のCSVデータを使用しています。
郵便番号データダウンロード
以下のコードはCSVをそのまま使用していますが、データベースに格納して使用するともう少し動作が早くなると思います。
【デモ】
【HTML】
<div id="admbox"> <form> <dl> <dt>郵便番号</dt> <dd><input type="text" name="adcode" value="" placeholder="例)9876543" maxlength="8"></dd> </dl> <div class="errmg_box"></div><!-- errmg_box --> <dl> <dt>住所</dt> <dd> <select name="adselect"> <option value="">お選びください</option> <option value="01">北海道</option> <option value="02">青森県</option> <option value="03">岩手県</option> <option value="04">宮城県</option> <option value="05">秋田県</option> <option value="06">山形県</option> <option value="07">福島県</option> <option value="08">茨城県</option> <option value="09">栃木県</option> <option value="10">群馬県</option> <option value="11">埼玉県</option> <option value="12">千葉県</option> <option value="13">東京都</option> <option value="14">神奈川県</option> <option value="15">新潟県</option> <option value="16">富山県</option> <option value="17">石川県</option> <option value="18">福井県</option> <option value="19">山梨県</option> <option value="20">長野県</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24">三重県</option> <option value="25">滋賀県</option> <option value="26">京都府</option> <option value="27">大阪府</option> <option value="28">兵庫県</option> <option value="29">奈良県</option> <option value="30">和歌山県</option> <option value="31">鳥取県</option> <option value="32">島根県</option> <option value="33">岡山県</option> <option value="34">広島県</option> <option value="35">山口県</option> <option value="36">徳島県</option> <option value="37">香川県</option> <option value="38">愛媛県</option> <option value="39">高知県</option> <option value="40">福岡県</option> <option value="41">佐賀県</option> <option value="42">長崎県</option> <option value="43">熊本県</option> <option value="44">大分県</option> <option value="45">宮崎県</option> <option value="46">鹿児島県</option> <option value="47">沖縄県</option> </select> </dd> </dl> <dl> <dt>市区町村</dt> <dd><input type="text" name="adtext" value="" placeholder="例)●●市××区●1-2-3"></dd> </dl> </form> </div>
【CSS】
#admbox { border:1px solid #c0c0c0; padding:10px; } #loading { background-image:url(/img/loading.gif); width:20px; height:20px; background-size:20px; } #all_back { display:none; background-color:rgba(0,0,0,0.5); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; transition:ease-out 0.5s; z-index:9980; } #address_popup_box { width: 50%; height: 500px; border: 1px solid #c0c0c0; position: absolute; top: 50px; left: 50%; margin-left: -25%; background-color: #fff; padding: 30px; box-sizing: border-box; display:none; z-index:9999; } #adse_btn { width:85%; height:50px; line-height:50px; text-align:center; margin:0 auto; border:1px solid #c0c0c0; } .adse_btn_on { cursor:pointer; background-color:#c0c0c0; } #pcsearch { cursor:pointer; } .errmg_box { color:#f00; }
【jQuery】
$(function(){ //郵便番号 var zipcode ; //郵便番号検索ajax function postajax(){ $('#admbox dl:nth-of-type(1)').append('<div id="loading"></div>'); $.ajax({ type:"POST", url:"cheack1.php", data: JSON.stringify(zipcode), crossDomain: false, dataType : "jsonp", scriptCharset: 'utf-8' }).done(function(data){ if(data[0]==""){ $('.errmg_box').text('見つかりませんでした。'); $('input[name="adtext"]').val(''); $("#loading").remove(); }else{ $('.errmg_box').text(''); $('select[name="adselect"]').val(data[0]); $('input[name="adtext"]').val(data[2]+data[3]); } }).always(function(data){ $("#loading").remove(); }); } //郵便番号チェック $("input[name='adcode']").blur(function(){ zipcode = $('input[name="adcode"]').val() ; var zipcodecount = zipcode.length ; if(zipcodecount<6){ $('.errmg_box').text('文字数が足りません。'); $('#loading').remove(); return; } postajax(); }); });
【cheack1.php】
$json = file_get_contents('php://input'); $data = json_decode($json, true); $zipcode = !empty($data) ? $data : ''; $zipcode = mb_convert_kana($zipcode, 'a', 'utf-8'); $zipcode = preg_replace('/[\sー-]/', '', $zipcode); $callback = (string)filter_input(INPUT_GET, 'callback'); $callback = htmlspecialchars(strip_tags($callback)); $param = array('','','',''); $file = 'post_all.csv'; if(file_exists($file)){ $spl = new SplFileObject($file); while (!$spl->eof()) { $columns = $spl->fgetcsv(); if(isset($columns[2]) && $columns[2] == $zipcode){ $kencode = substr($columns[0],0,2); $ttext = str_replace('以下に掲載がない場合','',$columns[8]); $param = array($kencode,$columns[6], $columns[7],$ttext); break; } } } printf("{$callback}(%s)", json_encode($param));
簡単な流れを説明すると、郵便番号を入力するとAjaxでページ遷移せずに郵便番号のCSVをチェックしjQueryでプルダウンとセレクトボックスの内容を変更しています。
入力フォームはユーザビリティにも大事な部分です。なるべく、ストレスなく入力できるよう、いろいろな機能をつけると、離脱がすくなると思います。
著者:poroa | 投稿日:2018年09月19日 | カテゴリ:jQuery