SQL見るだけクエリ#136 PHPとAJAXで非同期通信をする例

PHPとAJAXで非同期通信をする例を解説してみようと思います。

この記事を読むと（約5分）
PHPとAJAXで非同期通信をする方法をイメージできます。

PHPとAjaxを使用して非同期通信を行う例

この例では、ユーザがフォームに入力したデータを非同期でサーバに送信し、PHPで処理して結果を返すというシンプルなケースを考えます。

まず、HTML側のフォームとJavaScriptのコードです。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Ajax Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // フォームの送信イベントを処理
      $('#myForm').submit(function(e) {
        e.preventDefault(); // フォームのデフォルトの送信をキャンセル

        // フォームデータを取得
        var formData = $(this).serialize();

        // Ajaxリクエストの送信
        $.ajax({
          url: 'process.php', // PHPスクリプトのパス
          type: 'POST', // リクエストメソッド
          data: formData, // 送信データ
          success: function(response) {
            // レスポンスの処理
            $('#result').text(response);
          }
        });
      });
    });
  </script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="名前">
    <button type="submit">送信</button>
  </form>
  <div id="result"></div>
</body>
</html>

次に、Ajaxリクエストを受け取り処理するPHPスクリプトの例です。

<!-- process.php -->
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // フォームデータの取得
  $name = $_POST['name'];

  // データの処理
  // ここでは単純に入力された名前を大文字に変換して返す
  $response = strtoupper($name);

  // レスポンスの返却
  echo $response;
}
?>

この例では、フォームに入力された名前を非同期でサーバに送信し、PHPスクリプトが受け取ります。PHPスクリプトは、受け取った名前を大文字に変換し、その結果をAjaxのレスポンスとして返します。JavaScriptのコードでは、Ajaxリクエストを作成し、成功時にレスポンスを画面上に表示します。

注意点として、この例ではjQueryを使用していますが、他のAjaxライブラリやフレームワークを使用する場合には、それに応じた方法で非同期通信を実装する必要があります。