JavaScript で POST リクエストを使用してフォームを送信する
JavaScript では、HTML フォームを使用して POST リクエストを実行できます。記事は、データをサーバーに送信または送信するために HTML フォームで使用されるメソッドです。
JavaScript で POST リクエストを使用してフォームを送信する
以下のコードは、JavaScript を使用して POST リクエストでフォームを送信する方法を示しています。ここでは、新しい記事リクエストを作成し、ユーザーを新しい URL myPath に送信します。
最初に、3つの引数パス（URL またはエンドポイント）、パラメーター（キーと値のペアを持つオブジェクト）を受け取る関数を作成しました。最後の関数は、関数作成時に直接初期化する post メソッドです。
次に、document.createElement() メソッドを使用して、フォーム要素を作成し、それを form 変数内に格納します。次に、この form.method を post メソッドで初期化し、次に form.action をパスで初期化します。最後に、作成したフォームを DOM 内にある body タグに追加します。
function sendData(path, parameters, method = 'post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
この時点で、フォームを作成して body 要素に追加しました。現在、フォームにはフォーム内に要素が含まれていません。したがって、フォーム内にデータを追加するには、sendData() 関数に渡す parameters オブジェクトを使用します。このオブジェクトを反復処理するには、for ループを使用して、オブジェクトから各キーを取得します。
次に、input フォームフィールドを作成し、それを formField 変数内に格納します。このフォームを Web ページに表示したくないので、タイプを非表示に設定します。最後に、フォームフィールドの name および value パラメータを parameters オブジェクトのキーと値で初期化します。
この場合、2つのキーと値のペアを含むオブジェクトを渡しているためです。したがって、for ループは 2 回実行されます。その後、submit() メソッドを使用して POST リクエストを実行し、ユーザーを別のエンドポイントまたは URL、つまり myPath に送信します。sendData() 関数は、これらのパラメーターsendData('/myPath/', {query: 'hello world', num: '1'}); を渡すことによって呼び出されます。
上記のコードを実行すると、以下に示すように、POST リクエストが行われ、新しいエンドポイントに移動します。
これを行う別の方法は、JavaScript ではなく HTML 自体の中にフォーム全体を作成することです。次に、JavaScript コード内のこのフォームとその要素に次のようにアクセスします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value) {
document.getElementById('formField').name = name;
document.getElementById('formField').value = value;
document.getElementById('form').action = path;
document.getElementById('form').submit();
}
postData('https://www.wikipedia.org/', 'Writer', 'Jim Collins');
ここでは、method を POST として HTML フォーム自体に直接追加しています。postData() メソッド内で、パス、名前、値を postData("https://www.google.com/","Writer","Jim Collins"); として渡すだけです。次に、document.getElementById() メソッドを使用して formField にアクセスし、上記のように値を適切に設定します。このコードを実行すると、POST リクエストが実行され、以下に示すように、ユーザーが Wikipedia の Web サイトに移動します。
上記のコードは前のコードと同じように機能しますが、はるかに簡潔で読みやすくなっています。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn