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

SQL見るだけクエリ#137 PHPとAJAXで非同期通信をする例(補足)

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

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

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

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

昨日のコードに関して、スクリプト部分をもう少し丁寧に、補足してみようと思います。

<!-- 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>

詳細な解説を以下に示します。

1. $(document).ready(function() { ... });:
→ これはjQueryのready()メソッドです。ドキュメントが完全に読み込まれた後に実行される関数を指定します。つまり、ページが表示され、すべての要素がロードされた後に処理を実行します。

2. $('#myForm').submit(function(e) { ... });:
→ $('#myForm')は、id属性が"myForm"の要素を取得するためのセレクタです。
→ submit()メソッドは、指定した要素の送信イベントを処理するための関数を設定します。
→ function(e) { ... }は、送信イベントが発生した際に実行されるコールバック関数です。eはイベントオブジェクトを表します。

3. e.preventDefault();:
→ preventDefault()は、デフォルトのイベント動作をキャンセルするメソッドです。
→ ここでは、フォームのデフォルトの送信をキャンセルしています。つまり、通常のフォーム送信を防ぎ、Ajaxを使用して非同期にデータを送信することができます。

4. var formData = $(this).serialize();:
→ $(this)は、イベントが発生した要素(ここではフォーム)を表します。
→ serialize()メソッドは、フォーム内の入力要素の値をシリアライズ(連結)して文字列に変換します。
→ つまり、フォームの入力値を取得し、サーバーに送信するためのデータとして準備します。

5. $.ajax({ ... });:
→ $.ajax()は、jQueryのAjaxリクエストを行うメソッドです。
→ 中括弧内にオプションとなるパラメータが指定されています。

6. url: 'process.php':
→ urlは、Ajaxリクエストで送信する先のURLを指定するオプションです。
→ ここでは、"process.php"というPHPスクリプトへのパスを指定しています。

7. type: 'POST':
→ typeは、リクエストのHTTPメソッドを指定するオプションです。
→ ここでは、POSTメソッドを使用してデータを送信します。
→ フォームデータはリクエストの本文に含まれます。

8. data: formData:
→ dataは、Ajaxリクエストで送信するデータを指定するオプションです。
→ formDataは、先ほどシリアライズしたフォームデータを指します。
→ このデータがAjaxリクエストと共にサーバーに送信されます。

9. success: function(response) { ... }:
→ successは、Ajaxリクエストが成功した場合に実行されるコールバック関数を指定するオプションです。
→ function(response) { ... }は、成功時に実行されるコールバック関数です。responseはサーバーからのレスポンスデータを表します。
→ ここでは、レスポンスデータを#resultという要素のテキストとして表示しています。

以上がスクリプトの各部分の解説です。このスクリプトは、jQueryを使用してフォームの送信イベントを監視し、フォームデータを非同期でサーバーに送信し、サーバーからのレスポンスを処理するために使用されます。Ajaxを利用することで、ページのリロードをせずにデータの送受信が行えます。

SQLの使いどころ

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

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

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

KK

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