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

jQuery

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

  
この記事は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.htmljson.php を設置。
ブラウザから http://localhost/ にアクセスします。
当然、環境によってはURLやドキュメントルートは違う場合があるのでご注意ください。
実行例

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

  

共有やブックマークなど

コメントは受け付けていません。