JQueryでAJAXフォームを送信する方法
はじめに
jQueryは、検証を処理するためにフォームの送信とペアにすることができます。 これには、入力のエラーに関するフィードバックをユーザーに提供するという利点があります。
このチュートリアルでは、PHPバックエンドと通信するサンプルフォームが表示されます。 フォームはjQueryを使用して、ページの更新なしで（AJAXを使用して）フォームを処理し、エラーを示し、成功メッセージを表示します。
前提条件
このチュートリアルを完了するには、次のものが必要です:
- このチュートリアルでは、PHPがローカルにインストールされており、組み込みのwebサーバーを実行できることを前提としています。 お使いの環境にPHPをインストールするためのチュートリアルのいずれかを参照することができます。
- jQueryライブラリのセレクタとメソッドに精通しています。
- ブートストラップライブラリのクラスに精通しています。
注：このチュートリアルでは、jQueryの最新バージョン（現在は3.5.1）またはブートストラップ（現在は5.0.0-beta1）を指定していません。 ただし、このチュートリアルのレッスンの多くは、まだ最新バージョンに関連しています。
このチュートリアルは、PHP v7.3.24、jQuery v2.0.3、およびBootstrap v3.0.3で検証されました。
ステップ1—PHPでバックエンドを構築する
このチュートリアルの目的のために、バックエンドはPHPで記述されます。
まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します:
- mkdir jquery-form-validation
この新しいプロジェクトディレクトリに移動します:
- cd jquery-form-validation
次に、コードエディタを使用して新しいprocess.phpファイル
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data);このファイルはname、email、およびsuperheroAliasの値を取ります。 これらの値のいずれかが指定されていない場合は、エラーメッセージが返されます。 この時点で他の多くの検証を実行できますが、このチュートリアルの目的のために、これらの必要な入力が提供されていることを確認するだけです。 それ以外の場合、name、email、およびsuperheroAliasの値が存在する場合、成功メッセージが送り返されます。
: 実際のシナリオでは、バックエンドは、データの取得やデータベースへの変更の保存、セッションの作成、電子メールの送信などの他のタスクも担当します。
フォームの処理が完了したので、フォームを作成できます。
ステップ2—HTMLとCSSを使用したフロントエンドの構築
このチュートリアルの目的のために、ブートストラップは、ビューを構築するために使用されます。
プロジェクトディレクトリで、コードエディタを使用して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 class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" 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(content delivery network)バージョンが参照されます。 フォームのactionは、以前に作成されたPHPファイルに設定されます。 フォームは、name、email、およびsuperheroAliasのフィールドで構成されます。 フォームには送信ボタンも必要です。
ターミナルウィンドウを開き、プロジェクトディレクトリに移動します。 PHPサーバーを実行します:
- php -S localhost:8000
webブラウザでlocalhost:8000にアクセスし、次のことを確認します:
フォームが完了したので、フォームの送信を処理するスクリプトを作成できます。
ステップ3—JavaScriptとjQueryでフォーム送信ロジックを処理する
AJAX経由でフォームを送信するには、スクリプトは四つのタスクを処理する必要があります:
- 既定のアクションが実行されないように、フォーム送信ボタンをキャプチャします。
- jQueryを使用してフォームからすべてのデータを取得します。
- AJAXを使用してフォームデータを送信します。
- エラーがある場合は表示します。
プロジェクトディレクトリで、コードエディタを使用して新しい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ファイルへの参照を追加する:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->ユーザーがフォームの送信ボタンを押すと、JavaScriptコードはすべての入力値を取得し、POSTリクエストをprocess.phpに送信します。
注:成功したAJAXリクエストを処理するために.doneコールバックを使用します。 これは以前は.successと呼ばれていましたが、jQuery1.8以降では非推奨になりました。
別の方法は、フォーム情報を個別に取得する代わりにserializeを使用することです。
PHPスクリプトは、AJAX呼び出しが送信した入力を処理し、作成された$data配列を返します。 フォームを送信した後、ブラウザのコンソールでこれを確認できます:
フォームロジックが完了したので、フォームエラーを処理するスクリプトを作成できます。
ステップ4—フォーム検証エラーの表示
PHPスクリプトでは、コードはすべてのフィールドが必須であることを確認します。 フィールドが存在しない場合は、エラーが返されます。
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ブラウザでフォームを再訪し、フォームでデータを送信することを試してみてください。
サーバーから戻ってきたエラーがある場合は、フォームに必要なフィールドに関するフィードバックが表示されます:
そして、サーバーから戻ってくるエラーがない場合、フォームは成功した提出のためのフィードバックを提供します:
フォームを提出するたびに、以前の提出からのエラーがまだあります。 フォームが再び送信されるとすぐにそれらを削除することによってそれらをクリアする必要があります。
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を再訪し、次の強調表示されたコード行を追加します。
// ... $.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>' ); });// ...何らかの理由でサーバーが故障したりダウンしたりすると、フォームを送信しようとするユーザーにエラーメッセージが表示されます:
サーバーエラーメッセージが完了したので、サンプルフォームを完了しました。
$を使用しています。$の代わりに投稿します。ajax
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のトピックページで演習とプログラミングプロジェクトをチェックしてください。