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行で表示されました。