JavaScript で POST リクエストを使用してフォームを送信する

JavaScript では、HTML フォームを使用して POST リクエストを実行できます。投稿は、データをサーバーに送信または送信するために HTML フォームで使用されるメソッドです。

JavaScript で POST リクエストを使用してフォームを送信する

以下のコードは、JavaScript を使用して POST リクエストでフォームを送信する方法を示しています。ここでは、新しい投稿リクエストを作成し、ユーザーを新しい URLmyPath に送信します。

最初に、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 でフォーム投稿を送信する

これを行う別の方法は、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");

ここでは、methodPOST として HTML フォーム自体に直接追加しています。postData() メソッド内で、パス名前postData("https://www.google.com/", "Writer", "Jim Collins"); として渡すだけです。次に、document.getElementById() メソッドを使用して formField にアクセスし、上記のように値を適切に設定します。このコードを実行すると、POST リクエストが実行され、以下に示すように、ユーザーが Wikipedia の Web サイトに移動します。

javascript でフォーム投稿を送信-結果

上記のコードは前のコードと同じように機能しますが、はるかに簡潔で読みやすくなっています。