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

Web 開発では、フォームは頻繁に使用される対話方法です。ユーザーはフォームを通じて関連データを入力し、処理のためにサーバーに送信できます。 JavaScript でフォームを送信するにはどうすればよいですか?

1. 基本的な送信方法

フォームを送信する最も基本的な方法は、フォーム要素の submit() メソッドを通じて処理するためにフォーム データをサーバーに送信することです。 。コード例は次のとおりです。

document.getElementById("myForm").submit();

ここで、myForm はフォームの ID です。

このメソッドは通常、ログインや登録などの単純なフォームに適しており、多くの処理を必要としません。

2. Ajax 送信メソッド

フォームの送信時にデータ検証、非同期リクエストなどの追加の操作を実行する必要がある場合は、Ajax を使用する必要があります。提出方法。これは、XMLHttpRequest または jQuery の ajax メソッドを使用して実現できます。コード例は次のとおりです。

// 使用XMLHttpRequest
var xhr = new XMLHttpRequest();
var formData = new FormData(document.getElementById("myForm"));
xhr.open("POST", "http://example.com/submitForm", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}
xhr.send(formData);

// 使用jQuery
$.ajax({
    type: "POST",
    url: "http://example.com/submitForm",
    data: $('#myForm').serialize(),
    success: function(response) {
        console.log(response);
    }
});

このうち、FormData オブジェクトはフォーム内のデータを取得するために使用され、serialize() メソッドはフォーム データをシリアル化するために使用されます。

3. JavaScript 送信メソッド

form 要素には submit() メソッドがありますが、JavaScript はフォーム送信をシミュレートすることもできます。非表示のフォーム要素を作成し、関連するプロパティを設定し、JavaScript の submit() メソッドを使用して送信できます。コード例は次のとおりです。

var form = document.createElement("form");
form.action = "http://example.com/submitForm";
form.method = "POST";

var input = document.createElement("input");
input.type = "text";
input.name = "username";
input.value = "John";

form.appendChild(input);
document.body.appendChild(form);

form.submit();

このメソッドは、フォームが動的に作成されるシナリオ、またはフォーム送信のタイミングを制御する必要があるシナリオに適しています。

4. バインディング イベント送信メソッド

ユーザーが送信ボタンをクリックしてフォームを送信したときにイベントをトリガーする必要がある場合は、バインディング イベント メソッドを使用して、それを達成します。コード例は次のとおりです。

var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function() {
    // TODO: 其他逻辑处理
    document.getElementById("myForm").submit();
});

このうち、submitBtn は送信ボタンの ID です。

概要:

上記は JavaScript でフォームを送信する 4 つの方法であり、それぞれの方法に適用可能なシナリオがあります。ただし、どの方法を使用する場合でも、データの改ざんや漏洩を防ぐために、フォーム データのセキュリティに注意を払う必要があります。

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