Ajaxで住所の変更をしてみる

JavaScript

ずいぶんと時間が空いたが、Ajaxで住所の変更をしてみる。

参考URL

JSON形式のデータの作成

JSON形式のデータを作成する方法は、以下の二つの方法が一般的。

  1. "PEAR::Services_JSON"を使用する
  2. "Zend/Json.php"を使用する
  3. 拡張モジュールのphp-jsonモジュールを使用する

以下、サンプルコード

<?
	require_once "./JSON.php";

	$tdhk = db_sts_list($_GET['tdhk']);

	foreach ($tdhk as $key => $val) {
		$arr[] = array(
				"code" => $key,
				"name" => $val
			);
	}

	$json = new Services_JSON; 
	$encode = $json->encode($arr); 
	header("Content-Type: text/javascript; charset=utf-8"); 
	echo $encode;
?>
Ajax側の作成

prototype.jsを使用してAjaxで都道府県コードを上記のコードに渡す。

function get_tdhk(httpObj) {

	$('sts').innerHTML = "";

	var data = eval(httpObj.responseText);

	for(var i = 0; i < data.length; i++){
		var opt = document.createElement('option');
		opt.innerHTML = data[i].name;
		$('sts').appendChild(opt);
	}

}

function ajaxReq(){

	var myAjax = new Ajax.Request(
		"./create.php", 
		{
			method: 'get', 
			parameters: 'tdhk=' + $F('tdhk'), 
			onComplete: get_tdhk
		});
}
サンプル

↓サンプル。都道府県を変えると、隣のドロップダウンボックスに市町村が出てくる。

出来上がり図

まとめ

Ajax面白い。簡単だし動きが分かるし。これで、鉄板を変更していこう。