この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
ソースコード
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="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
/**
* Ajax通信メソッド
* @param type : HTTP通信の種類
* @param url : リクエスト送信先のURL
* @param data : サーバに送信する値
*/
$.ajax({
type: "POST",
url: "json.php",
dataType: "json",
}).done(function(data, dataType) {
// successのブロック内は、Ajax通信が成功した場合に呼び出される
// 結果が0件の場合
if(data == null) alert('データが0件でした');
// 返ってきたデータの表示
var $content = $('#content');
for (var i =0; i<data.length; i++) {
$content.append("<li>" + data[i].name + "</li>");
}
}).fail(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.html と json.php を設置。
ブラウザから http://localhost/ にアクセスします。
当然、環境によってはURLやドキュメントルートは違う場合があるのでご注意ください。
以上で、簡単にPHP経由でデータベースのデータを非同期で表示することが出来ました。
今回はページ読み込み時にデータを表示するだけなのでほとんど意味がないですが、いろいろと応用してみてください。
