JQueryでAJAXフォームを送信する方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, javascript

序章

jQueryをフォーム送信と組み合わせて、検証を処理できます。これには、入力のエラーに関するフィードバックをユーザーに提供するという利点があります。

Animated gif depicting a user filling out inputs in a form and receiving a success message.

このチュートリアルでは、PHPバックエンドと通信するサンプルフォームが表示されます。フォームはjQueryを使用して、ページを更新せずに（AJAXを使用して）フォームを処理し、エラーを示し、成功メッセージを表示します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、PHPがローカルにインストールされており、組み込みのWebサーバーを実行できることを前提としています。ご使用の環境にPHPをインストールするためのチュートリアルの1つを参照できる場合があります。
jQueryライブラリのセレクターとメソッドにある程度精通していること。
Bootstrapライブラリのクラスにある程度精通している。
コードエディタ。
最新のWebブラウザ。

注：このチュートリアルでは、最新バージョンのjQuery（現在は3.5.1）またはBootstrap（現在は5.0.0-beta1）は指定されていません。ただし、このチュートリアルのレッスンの多くは、最新バージョンに関連しています。

このチュートリアルは、PHP v7.3.24、jQuery v2.0.3、およびBootstrapv3.0.3で検証されました。

ステップ1—PHPを使用したバックエンドの構築

このチュートリアルでは、バックエンドはPHPで記述されます。

まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir jquery-form-validation

この新しいプロジェクトディレクトリに移動します。

cd jquery-form-validation

次に、コードエディタを使用して、新しいprocess.phpファイルを作成します。

process.php

<?php

$errors = [];
$data = [];

if (empty($_POST['name'])) {
    $errors['name'] = 'Name is required.';
}

if (empty($_POST['email'])) {
    $errors['email'] = 'Email is required.';
}

if (empty($_POST['superheroAlias'])) {
    $errors['superheroAlias'] = 'Superhero alias is required.';
}

if (!empty($errors)) {
    $data['success'] = false;
    $data['errors'] = $errors;
} else {
    $data['success'] = true;
    $data['message'] = 'Success!';
}

echo json_encode($data);

このファイルは、name、email、およびsuperheroAliasの値を取ります。これらの値のいずれかが指定されていない場合、エラーメッセージが返送されます。この時点で他の多くの検証を実行できますが、このチュートリアルでは、これらの必要な入力が提供されていることを確認するだけです。それ以外の場合、name、email、およびsuperheroAliasの値が存在する場合、成功メッセージが返送されます。

注：実際のシナリオでは、バックエンドは、データの取得やデータベースへの変更の保存、セッションの作成、電子メールの送信などの他のタスクも担当します。

フォームの処理が完了したので、フォームを作成できます。

ステップ2—HTMLとCSSを使用してフロントエンドを構築する

このチュートリアルでは、ブートストラップを使用してビューを構築します。

プロジェクトディレクトリで、コードエディタを使用してindex.htmlファイルを作成します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Form Example</title>
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
    />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
  <body>
    <div class="col-sm-6 col-sm-offset-3">
      <h1>Processing an AJAX Form</h1>

      <form action="process.php" method="POST">
        <div id="name-group" class="form-group">
          <label for="name">Name</label>
          <input
            type="text"
            class="form-control"
            id="name"
            name="name"
            placeholder="Full Name"
          />
        </div>

        <div id="email-group" class="form-group">
          <label for="email">Email</label>
          <input
            type="text"
            class="form-control"
            id="email"
            name="email"
            placeholder="[email protected]"
          />
        </div>

        <div id="superhero-group" class="form-group">
          <label for="superheroAlias">Superhero Alias</label>
          <input
            type="text"
            class="form-control"
            id="superheroAlias"
            name="superheroAlias"
            placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow"
          />
        </div>

        <button type="submit" class="btn btn-success">
          Submit
        </button>
      </form>
    </div>
  </body>
</html>

BootstrapとjQueryのCDN（コンテンツ配信ネットワーク）バージョンが参照されます。フォームのactionは、以前に作成されたPHPファイルに設定されます。フォームは、name、email、およびsuperheroAliasのフィールドで構成されます。フォームには送信ボタンも必要です。

ターミナルウィンドウを開き、プロジェクトディレクトリに移動します。そして、PHPサーバーを実行します。

php -S localhost:8000

Webブラウザでlocalhost:8000にアクセスし、次のことを確認してください。

Screenshot of a form with fields for Name, Email, and Superhero Alias.

フォームが完成したので、フォームの送信を処理するスクリプトを作成できます。

ステップ3—JavaScriptおよびjQueryでのフォーム送信ロジックの処理

AJAXを介してフォームを送信するには、スクリプトで次の4つのタスクを処理する必要があります。

デフォルトのアクションが実行されないように、フォーム送信ボタンをキャプチャします。
jQueryを使用してフォームからすべてのデータを取得します。
AJAXを使用してフォームデータを送信します。
エラーがある場合は表示します。

プロジェクトディレクトリで、コードエディタを使用して新しいform.jsファイルを作成します。

form.js

$(document).ready(function () {
  $("form").submit(function (event) {
    var formData = {
      name: $("#name").val(),
      email: $("#email").val(),
      superheroAlias: $("#superheroAlias").val(),
    };

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);
    });

    event.preventDefault();
  });
});

このコードは、name、email、およびsuperheroAliasフィールドからデータを取得します。次に、フォームデータのペイロードを使用してprocess.phpへのAJAXリクエストを実行します。接続が成功すると、コンソールは応答データをログに記録します。 event.preventDefault()は、送信時にページをリロードすることにより、フォームがデフォルトで動作しないようにするために使用されます。

form.jsへの変更を保存した後、コードエディタでindex.htmlファイルに再度アクセスします。新しいJavaScriptファイルへの参照を追加します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Form Example</title>
    <!-- ... -->
    <script src="form.js"></script>
</head>
<!-- ... -->

これで、ユーザーがフォームの Submit ボタンを押すと、JavaScriptコードがすべての入力値を取得し、POSTリクエストをprocess.phpに送信します。

注： .doneコールバックを使用して、成功したAJAXリクエストを処理します。これは以前は.successと呼ばれていましたが、jQuery1.8以降では非推奨になりました。

もう1つの方法は、フォーム情報を個別に取得する代わりに、serializeを使用することです。

PHPスクリプトは、AJAX呼び出しが送信した入力を処理し、作成された$data[]配列を返します。フォームを送信した後、ブラウザのコンソールでこれを確認できます。

Screenshot of the Web DevTools Console in the browser displaying the data returned on submitting a form - success: true, message: Success!

フォームロジックが完成したので、フォームエラーを処理するスクリプトを作成できます。

ステップ4—フォーム検証エラーの表示

PHPスクリプトでは、コードはすべてのフィールドが必須であることを確認するためにチェックします。フィールドが存在しない場合、エラーが返されます。

form.jsに再度アクセスし、次の強調表示されたコード行を追加します。

form.js

// ...

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);

      if (!data.success) {
        if (data.errors.name) {
          $("#name-group").addClass("has-error");
          $("#name-group").append(
            '<div class="help-block">' + data.errors.name + "</div>"
          );
        }

        if (data.errors.email) {
          $("#email-group").addClass("has-error");
          $("#email-group").append(
            '<div class="help-block">' + data.errors.email + "</div>"
          );
        }

        if (data.errors.superheroAlias) {
          $("#superhero-group").addClass("has-error");
          $("#superhero-group").append(
            '<div class="help-block">' + data.errors.superheroAlias + "</div>"
          );
        }
      } else {
        $("form").html(
          '<div class="alert alert-success">' + data.message + "</div>"
        );
      }

    });

    event.preventDefault();
  });
// ...

このコードは、応答に各フィールドのエラーが含まれているかどうかを確認します。エラーが存在する場合は、has-errorクラスを追加し、エラーメッセージを追加します。

次に、Webブラウザーでフォームに再度アクセスし、フォームを使用してデータを送信してみます。

サーバーからエラーが戻ってきた場合、フォームは必須フィールドに関するフィードバックを提供します。

Screenshot of the example form depicting errors for name, email, and superhero alias input fields.

また、サーバーから返されるエラーがない場合、フォームは送信を成功させるためのフィードバックを提供します。

Screenshot of the example form depicting a success message.

フォームを送信するたびに、前回の送信からのエラーがまだ残っています。フォームが再度送信されたらすぐに削除して、クリアする必要があります。

form.jsに再度アクセスし、次の強調表示されたコード行を追加します。

form.js

// ...

  $("form").submit(function (event) {
    $(".form-group").removeClass("has-error");
    $(".help-block").remove();

    // ...
  });

// ...

このコードは、すべての.form-group要素からhas-errorクラスを削除します。また、エラーメッセージが表示されたすべての.help-block要素も削除されます。

手順5—サーバー接続エラーの表示

サーバーへの接続中にエラーが発生した場合、AJAX呼び出しからのJSON応答はありません。ユーザーが決して到着しない応答を待たないようにするために、接続障害のエラーメッセージを提供できます。

form.jsに再度アクセスし、次の強調表示されたコード行を追加します。

form.js

// ...

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    })
      .done(function(data) {
        // ...
      })
      .fail(function (data) {
        $("form").html(
          '<div class="alert alert-danger">Could not reach server, please try again later.</div>'
        );
      });

// ...

サーバーが何らかの理由で故障または故障した場合、フォームを送信しようとすると、次のエラーメッセージが表示されます。

Screenshot of the example form depicting an error message of being unable to reach the server.

サーバーエラーメッセージが完成したので、サンプルフォームに記入しました。

`$.ajax`の代わりに`$.post`を使用する

jQueryは、$.ajaxの代わりに、$。postの短縮メソッドも提供します。

form.jsの$.ajaxコードは、$.postで書き換えることができます。

$.post('process.php', function(formData) {
  // place success code here
})
  .fail(function(data) {
    // place error code here
  });

$.postの利点は、宣言する必要のある接続構成がそれほど多くないことです。

結論

この記事では、jQueryを使用してPHPバックエンドと通信し、フォームにエラーを表示するサンプルフォームを作成しました。

次のステップとして、有効な電子メールアドレスや日付などのより複雑な検証を検討する必要があります。また、ブラウザで機能するクライアント側の検証を適用することにも興味があるかもしれません。

JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

ステップ1—PHPを使用したバックエンドの構築

ステップ2—HTMLとCSSを使用してフロントエンドを構築する

ステップ3—JavaScriptおよびjQueryでのフォーム送信ロジックの処理

ステップ4—フォーム検証エラーの表示

手順5—サーバー接続エラーの表示

$.ajaxの代わりに$.postを使用する

結論

getdocs

`$.ajax`の代わりに`$.post`を使用する