UI設計したり、ウェブシステムを開発したりします。 

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

記入日:2023-05-29 編集日:2023-05-29

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側でデータベース一覧を表示し、詳細ボタンをクリックすると詳細情報が非同期に取得され表示されます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。