JavaScriptを使用してフォームを送信する方法

Web 開発では、フォームはユーザーが Web サーバーにデータを送信できるようにする一般的な要素です。ユーザーがフォームにデータを入力して送信ボタンをクリックすると、フォームはサーバーにリクエストを送信し、サーバーはリクエストを処理して結果を返します。このプロセスでは、JavaScript を使用してフォーム送信イベントをリッスンすることができるため、ページを更新せずにフォーム データを処理および検証できます。この記事では、JavaScript を使用してフォームを送信する方法について説明します。

1. フォーム コントロール

JavaScript を使用してフォームを送信する前に、まず HTML フォーム コントロールに関する知識を理解する必要があります。フォーム コントロールには、入力ボックス、ドロップダウン ボックス、ラジオ ボタン、チェック ボックスなどが含まれます。 HTML では、これらのコントロールは タグで定義され、各タグにはそのタイプを表す type 属性があります。たとえば、テキストの入力に使用される入力ボックスには タグを使用でき、フォームの送信に使用されるボタンには タグを使用できます。一般的に使用されるフォーム コントロールとそのタイプは次のとおりです:

1. テキスト ボックス

2 . パスワード ボックス

3. チェックボックス

水泳

4. ラジオ ボタン

男性

5. ドロップダウン ボックス

Beijing
上海
広州

2. モニタリング フォーム イベントを送信

JavaScript でフォーム データを処理するには、まずフォームの送信イベントをリッスンする必要があります。 HTML では、フォーム送信イベントは

タグによって定義され、JavaScript の addEventListener() メソッドを使用してそれをリッスンできます。たとえば、次のコードは、送信ボタンがクリックされたときにイベントをリッスンします:

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener("click", function(event) {
//フォームデータを処理します
event.preventDefault(); //デフォルトの送信動作を禁止します
});

この例では、最初に送信ボタンの要素を取得します。 getElementById() メソッドを呼び出し、addEventListener() メソッドを呼び出してクリック イベントをリッスンします。イベントハンドラー関数では、フォームデータを取得して処理することができます。最後に、フォームのデフォルトの送信動作が発生しないようにするために、event.preventDefault() メソッドを呼び出してキャンセルします。

3. フォーム データの取得

フォーム送信イベントをリッスンした後、処理するフォーム データを取得する必要があります。 JavaScript では、 document.forms[] コレクションを使用してフォーム要素を取得できます。たとえば、次のコードはユーザー名とパスワードを表す入力ボックス要素を取得します:

var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password ;

この例では、document.forms[0] を使用して最初の タグの form 要素を取得し、次に name 属性を通じてユーザー名とパスワードの入力ボックスの要素を取得します。

フォーム データを取得する別の方法は、FormData オブジェクトを使用することです。 FormData は、フォーム データを構築してサーバーに送信するために使用できる新しい API です。たとえば、次のコードは FormData オブジェクトを使用してユーザー情報を渡します:

var formData = new FormData();
formData.append("username", txtUsername.value);
formData .append("password", txtPassword.value);

この例では、まず新しい FormData オブジェクトを作成し、次に append() メソッドを使用してフォーム データを FormData オブジェクトに追加します。最後に、FormData オブジェクトを XMLHttpRequest オブジェクトの send() メソッドに渡して、フォーム データをサーバーに送信します。

4. フォーム データの確認

フォームを送信する前に、フォーム データを確認する必要があります。たとえば、ユーザー名とパスワードが空かどうかを確認できます:

if(txtUsername.value == "") {
alert("ユーザー名を入力してください");
txtUsername.focus () ;
return false; //送信をキャンセル
} else if(txtPassword.value == "") {
alert("パスワードを入力してください");
txtPassword.focus() ;
return false; //送信をキャンセル
} else {
//フォームを送信
return true;
}

この例では、最初にユーザー名が入力ボックスが空です。空の場合は、プロンプト ボックスがポップアップ表示され、カーソルがユーザー名の入力ボックスに移動します。ユーザー名が空でない場合は、パスワード入力ボックスが空かどうかの確認が続けられます。パスワードが空でない場合は、フォームの送信が許可されます。

5. 完全な JavaScript コード例

これで、JavaScript を使用してフォームを送信する方法を学びました。以下は、フォームの送信イベントをリッスンし、フォーム データを取得し、データを検証して、サーバーに送信する完全な JavaScript コードの例です。

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

この例では、まず getElementById() メソッドを通じてログイン フォームを表す要素を取得し、addEventListener を呼び出します。 () メソッドを使用して、その送信イベントをリッスンします。イベントハンドリング機能では、ユーザー名とパスワードの入力ボックス要素を取得して判定し、要件を満たしていない場合はプロンプトボックスが表示され、フォームのデフォルト送信動作がキャンセルされます。ユーザー名もパスワードも空の場合は、FormData オブジェクトが作成され、そこにデータが追加されます。最後に、XMLHttpRequest オブジェクトを使用して FormData オブジェクトをサーバーに送信し、応答結果をプロンプト ボックスに表示します。

以上がJavaScriptを使用してフォームを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。