jiichan.com

PROGRAMMING

PHP
javascript
CSS
Java

PHPでJSON形式のデータを出力する

ページ内の一部を書き換えする場合はAjaxが使われますが、その場合のリクエスト先はPHPが多いと思います。 PHPを使う理由のひとつはデータベースへの問い合わせ結果を得るためで、その結果をJSON形式で返す場合ほとんどだと思います。 そこで、PHPからJSON形式のデータを出力してみます。
データベースのテーブルの内容は次のようになっています。

codeteamnameagesex
1A田中25男
2A佐藤42男
3A鈴木32女
4B山本40女
5B伊藤35男
6B山田28女

JSONを出力するPHP

javascriptからのリクエストを受けて、JSON形式でデータを返すPHPです。 

try {
    $conn = new PDO($dsn, "user", "password");
    $sql = "SELECT name, age, sex FROM member";
    $stmt = $conn->query($sql);
    // 問い合わせ結果を配列に格納
    while ($row = $stmt->fetch(PDO::FETCH_BOTH)) {
        $kekka[] = array(
                      "name"=>$row[0],
                      "age"=>$row[1],
                      "sex"=>$row[2]);
    }
    echo json_encode($kekka);  // 配列などの値をJSON形式にした文字列で返す
} catch (PDOException $e) {
    echo 'ERROR:'.$e->getMessage();
    die();
}

12行目だけがポイントで、その他のコードはデータベースの処理だけです。 12行目で、データベースの問い合わせ結果をjson_encode関数に渡し、JSON形式の文字列にしたうえで javascriptに返しています。

javascriptでPHPへリクエストし、JSONデータを受け取る

javascriptからPHPへリクエストし、受け取ったJSONを見やすいように加工して表示します。 

var req = new XMLHttpRequest();
req.open('GET', "response.php", true);
req.onreadystatechange = function(){
	if((req.readyState == 4) && (req.status == 200)){
		// 返却されたテキストをjavascriptのオブジェクトに変換
		var data= JSON.parse(req.responseText);
		// 結果を表示するエリアを取得
		var disp = document.getElementById("disp");
		// dataを見やすいように加工する
		var htmlStr = "";
		for(var i in data){
			htmlStr += data[i].name + "：" + 
					  data[i].age + "歳：" + 
					  data[i].sex + "<br>";
		}
		// 結果を表示
		disp.innerHTML = htmlStr;
	}
};
req.send("");

6行目のJSON.parseで受け取ったテキストデータをjavascriptのオブジェクトに変換しています。 

田中：25歳：男
佐藤：42歳：男
鈴木：32歳：女
山本：40歳：女
伊藤：35歳：男
山田：28歳：女

因みに下のコードのようにJSON.parseや加工処理を外して、直接受け取ったJSONデータを表示するように書き換えしたところ、次のようになりました。 

var req = new XMLHttpRequest();
req.open('GET', "response.php", true);
req.onreadystatechange = function(){
	if((req.readyState == 4) && (req.status == 200)){
		// 結果を表示するエリアを取得
		var disp = document.getElementById("disp");
		// 結果を表示
		disp.innerHTML = req.responseText;
	}
};
req.send("");


[
{"name":"\u7530\u4e2d","age":"25","sex":"\u7537"},
{"name":"\u4f50\u85e4","age":"42","sex":"\u7537"},
{"name":"\u9234\u6728","age":"32","sex":"\u5973"},
{"name":"\u5c71\u672c","age":"40","sex":"\u5973"},
{"name":"\u4f0a\u85e4","age":"35","sex":"\u7537"},
{"name":"\u5c71\u7530","age":"28","sex":"\u5973"}
]

上の結果は見やすいように改行を入れてあります。
実際は改行無しで1行で表示されました。