Ajaxで画面遷移なしで取得したDBレコードをhtmlに反映させる

	<input type='button' onclick="a()">
	<div id="a"></div>

 仮に上のような記述をしておいて、ボタンが押されたタイミングでid="a"のdivの中に、DBから抽出したレコードがポンポン挿入されるように
したいとする。

 例えばこんなJavascriptでいけるようだ。

<script>
	function a() {
		$.ajax({
		  type: 'GET',
		  url: 'http://localhost/jsonf.php',
		  async: false,
		  success: function(json){
		    var data = JSON.parse(json);
		    var len = data.length;

		    for(var i=0; i < len; i++){
		      $("#a").append(data[i]["a"] + '<br>' + data[i]["b"] + '<br>');
		    }
		  }
		});
	}
</script>

 URLの部分は、DBのレコードをjsonエンコードしたものをreturnで返すようなphp側のメソッドのURLを普通は指定する。
ちょっと試しておきたかっただけなので、今は仮に別ファイルのPHPに下のようなものを書いて読んでテストしてみた。DBからのレコードの形っぽくした
arrayをechoしてるだけのPHP。ボタンをクリックするたびに、test1〜test4がリロードなしで追加されていく。

<?php

	$tmp = array(0 =>
                   array("a" => "test1",
                         "b" => "test2",
                   ),
                     1 => 
                   array("a" => "test3",
                         "b" => "test4",
                   ),
           );
	echo json_encode($tmp);

?>

 JSONにすると、

[{"a":"test1","b":"test2"},{"a":"test3","b":"test4"}]

こんな形で多次元の連想配列であっても単なる一行の文字列のように渡せる。これをJSON.parse()で配列に戻して利用する。