SQL見るだけクエリ#141 Ajaxを使ってPHPで非同期にデータベースから情報を取得する方法

Ajaxを使ってPHPで非同期にデータベースから情報を取得する方法を解説してみようと思います。

この記事を読むと（約5分）
Ajaxを使ってPHPで非同期にデータベースから情報を取得する方法をイメージできます。

Ajaxを使ってPHPで非同期に情報を取得

Ajaxを使用してPHPで非同期にデータベースからSELECTする方法を解説します。
以下の手順に従って進めます。

1. HTMLのセットアップ
最初に、HTML側のセットアップを行います。一覧表示と詳細情報表示のために、以下のようなHTMLコードを作成します。

<!DOCTYPE html>
<html>
<head>
  <title>非同期データベース取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>データベース一覧</h1>
  <ul id="list">
    <!-- ここにデータベースの一覧が表示されます -->
  </ul>
  <div id="details">
    <!-- ここに詳細情報が表示されます -->
  </div>

  <script>
    $(document).ready(function() {
      // ページの読み込みが完了したら、データベース一覧を取得します
      loadDatabaseList();

      // 詳細ボタンがクリックされた時の処理を設定します
      $(document).on('click', '.detail-button', function() {
        var databaseId = $(this).data('id');
        loadDatabaseDetails(databaseId);
      });
    });

    function loadDatabaseList() {
      $.ajax({
        url: 'get_database_list.php', // データベース一覧を取得するPHPファイルのパス
        type: 'GET',
        dataType: 'json',
        success: function(response) {
          var listHtml = '';
          $.each(response, function(index, database) {
            listHtml += '<li><button class="detail-button" data-id="' + database.id + '">' + database.name + '</button></li>';
          });
          $('#list').html(listHtml);
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    }

    function loadDatabaseDetails(databaseId) {
      $.ajax({
        url: 'get_database_details.php', // 詳細情報を取得するPHPファイルのパス
        type: 'POST',
        data: { id: databaseId },
        dataType: 'json',
        success: function(response) {
          var detailsHtml = '<h2>' + response.name + '</h2>';
          detailsHtml += '<p>' + response.description + '</p>';
          $('#details').html(detailsHtml);
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    }
  </script>
</body>
</html>

2. PHPのセットアップ
次に、Ajaxリクエストを処理するためのPHPファイルを作成します。

get_database_list.php

// PDOでデータベースに接続する設定
$db_host = 'localhost';
$db_name = 'your_database_name';
$db_user = 'your_username';
$db_pass = 'your_password';

try {
  $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // データベース一覧を取得するクエリを実行します
  $stmt = $pdo->query("SELECT * FROM databases");
  $databases = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 結果をJSON形式で返します
  header('Content-Type: application/json');
  echo json_encode($databases);
} catch (PDOException $e) {
  // エラーハンドリング
  echo "データベースにアクセスできませんでした: " . $e->getMessage();
}

get_database_details.php

// PDOでデータベースに接続する設定
$db_host = 'localhost';
$db_name = 'your_database_name';
$db_user = 'your_username';
$db_pass = 'your_password';

try {
  $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // POSTリクエストから送られてきたデータベースIDを取得します
  $databaseId = $_POST['id'];

  // 詳細情報を取得するクエリを実行します
  $stmt = $pdo->prepare("SELECT * FROM databases WHERE id = :id");
  $stmt->bindParam(':id', $databaseId);
  $stmt->execute();
  $database = $stmt->fetch(PDO::FETCH_ASSOC);

  // 結果をJSON形式で返します
  header('Content-Type: application/json');
  echo json_encode($database);
} catch (PDOException $e) {
  // エラーハンドリング
  echo "データベースにアクセスできませんでした: " . $e->getMessage();
}

以上がAjaxを使用してPHPで非同期にデータベースからSELECTする方法の解説となります。これにより、HTML側でデータベース一覧を表示し、詳細ボタンをクリックすると詳細情報が非同期に取得され表示されます。