PHPからMySQLのデータをJSON形式で出力してjQueryとAjax通信を使って取得して表示するサンプル

jQuery

以前書かせて頂いた「jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル」という記事が何気に好評だったので、今度はPHPでMySQLから取得したデータをJSON形式で返して、Ajax通信で取得してリストに表示するサンプルを作ってみました。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

ソースコード

mysql_connectやmysql_queryなどMySQL 関数はPHP 5.5.0より非推奨になるのでMySQLiあるいはPDO_MySQLを使用しましょう。

SQL

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` text NOT NULL,
  PRIMARY KEY (`id`)
);

json.php

<?php

//Ajax通信ではなく、直接URLを叩かれた場合はエラーメッセージを表示
if (
	!(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') 
	&& (!empty($_SERVER['SCRIPT_FILENAME']) && 'json.php' === basename($_SERVER['SCRIPT_FILENAME']))
	) 
{
	die ('このページは直接ロードしないでください。');
}

//接続文字列 (PHP5.3.6から文字コードが指定できるようになりました)
$dsn = 'mysql:dbname=sample;host=localhost;charset=utf8';

//ユーザ名
$user = 'root';

//パスワード
$password = '';

try
{
	//nullで初期化
	$users = null;
	
	//DBに接続
	$dbh = new PDO($dsn, $user, $password);
	
	//'users' テーブルのデータを取得する
	$sql = 'select * from users';
	$stmt = $dbh->query($sql);
	
	//取得したデータを配列に格納
	while ($row = $stmt->fetchObject())
	{
		$users[] = array(
			'id'=> $row->id
			,'name' => $row->name
			);
    }
	
	//JSON形式で出力する
	header('Content-Type: application/json');
	echo json_encode( $users );
	exit;
}
catch (PDOException $e)
{
	//例外処理
    die('Error:' . $e->getMessage());
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />

	<title>jQuery & Ajax通信を使ってPHPからJSON形式のデータを取得して表示するサンプル</title>
	
	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
	$(document).ready(function() 
	{
		/**
		 * Ajax通信メソッド
		 * @param type  	: HTTP通信の種類
		 * @param url   	: リクエスト送信先のURL
		 * @param dataType  : データの種類
		 */
		$.ajax({
			type: "POST",
			url: "json.php",
			dataType: "json",
			/**
			 * Ajax通信が成功した場合に呼び出されるメソッド
			 */
			success: function(data, dataType) 
			{
				//結果が0件の場合
				if(data == null) alert('データが0件でした');
				
				//返ってきたデータの表示
				var $content = $('#content');
				for (var i =0; i<data.length; i++) 
				{
					$content.append("<li>" + data[i].name + "</li>");
				}
			},
			/**
			 * Ajax通信が失敗場合に呼び出されるメソッド
			 */
			error: function(XMLHttpRequest, textStatus, errorThrown) 
			{
				//通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

				//this;
				//thisは他のコールバック関数同様にAJAX通信時のオプションを示します。

				//エラーメッセージの表示
				alert('Error : ' + errorThrown);
			}
		});
	});
	</script>
</head>
<body>
	<h1>jQuery & Ajax通信を使ってPHPからJSON形式のデータを取得して表示するサンプル</h1>
	<ul id="content"></ul>
</body>
</html>

ちなみにデータを取得するだけでしたら、jQueryのgetJSONメソッドなども用意されています。

実行例

XAMPPのドキュメントルートフォルダ htdocs に、index.htmljson.php を設置。
ブラウザから http://localhost/ にアクセスします。
当然、環境によってはURLやドキュメントルートは違う場合があるのでご注意ください。
実行例

以上で、簡単にPHP経由でデータベースのデータを非同期で表示することが出来ました。
今回はページ読み込み時にデータを表示するだけなのでほとんど意味がないですが、いろいろと応用してみてください。

  

共有やブックマークなど