さまざまな js フォーム送信方法には何がありますか?

JS フォームを送信するにはどのような方法がありますか?

フロントエンド開発において、フォームはユーザーと Web ページ間のデータ対話の重要な形式の 1 つです。強力なスクリプト言語である JavaScript を使用すると、さまざまな方法でフォーム データを送信できます。以下では、いくつかの一般的な JS フォーム送信メソッドを紹介し、具体的なコード例を示します。

1. form 要素の submit() メソッドを使用してフォームを送信します。

   これは最も基本的な方法で、フォームの submit() メソッドを直接呼び出します。フォームを送信するための要素。コード例は次のとおりです。

   <form id="myForm" action="submit.php" method="post">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       document.getElementById("myForm").submit();
     }
   </script>

   ログイン後にコピー

   上記のコードでは、送信ボタンがクリックされると、submitForm() 関数が呼び出され、フォーム データを submit.php ページに送信します。

2. XMLHttpRequest オブジェクトを使用してフォームを送信します。

   XMLHttpRequest オブジェクトは、バックグラウンドでサーバーとのデータ対話に使用されるテクノロジです。 XMLHttpRequest オブジェクトを作成して、フォーム データをサーバーに送信します。コード例は次のとおりです。

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       var xhr = new XMLHttpRequest();
       var formData = new FormData(document.getElementById("myForm"));
   
       xhr.open("POST", "submit.php", true);
       xhr.onreadystatechange = function() {
         if (xhr.readyState === 4 && xhr.status === 200) {
           console.log(xhr.responseText);
         }
       };
       xhr.send(formData);
     }
   </script>

   ログイン後にコピー

   XMLHttpRequest を通じてフォーム データを送信する場合は、FormData オブジェクトの構築に注意し、それを send() メソッドのパラメーターとして使用してデータを送信する必要があります。

3. AJAX ライブラリを使用してフォームを送信する:

   jQuery などの AJAX ライブラリを使用すると、フォームを送信するためのより便利な方法が提供されます。コード例は次のとおりです。

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script src="jquery.min.js"></script>
   <script>
     function submitForm() {
       var formData = $("#myForm").serialize();
   
       $.post("submit.php", formData, function(response) {
         console.log(response);
       });
     }
   </script>

   ログイン後にコピー

   上記のコードでは、フォーム データをシリアル化し、$.post() メソッドを使用してデータをサーバーに送信し、応答結果をコールバック関数で処理します。 。

上記は、いくつかの一般的な JS フォーム送信メソッドとそのコード例です。特定のニーズとテクノロジー スタックに応じて、フォーム送信を実装する適切な方法を選択します。この記事の内容があなたのお役に立てれば幸いです。

以上がさまざまな js フォーム送信方法には何がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。