非同期通信ではない、POSTリクエストをする関数

はじめに

Form送信を活用して、非同期通信ではなく、POSTリクエストする方法を紹介します。

他のサービスと連携する実装をしていて、AJAXリクエストではなく、リダイレクトを期待されており、POSTリクエストをしたい時などに使えます。

コード

formPost.ts

const formPost = (value, url) => {
  const form = document.createElement("form");
  form.method = "POST";
  form.action = url; //`https://xxxxxxxx`;

  const input = document.createElement("input");
  input.type = "hidden";
  input.name = "submitValue";
  input.value = JSON.stringify(value);
  form.appendChild(input);

  form.style.display = "none";
  document.body.appendChild(form);
  form.submit();
};

解説

「仮想的なformを作成し、値を入れて、formを送信する」関数です。

処理の流れ

1. formを作成する
2. formのメソッド(POST)と送信先を設定する
3. inputを作成する
4. inputにnameとvalueを設定する
5. formの中に作成したinputを入れる
6. formをみえないように設定する
7. 自分のサービスのHTMLの中に作成したformを入れる
8. formを送信する

JSON.stringify(value)で1つの文字列にしており、
{submitValue: valueを文字列にしたデータ}({name: value})を送信しています。
文字列に変換しているので、受け取る側では、JSON.parseが必要です。

改修案

valueがオブジェクトの時、valueを配列に変換しループして複数のinputを作成する方法もできそうです！
そうすると、JSON. stringifyやJSON.parseが不要になりそうです。