JavaScript によるフォームの送信

<button>Click Me!</button>

const btn = document.querySelector("button");

function sendData(data) {
  console.log("Sending data");

  const XHR = new XMLHttpRequest();

  const urlEncodedDataPairs = [];

  // data オブジェクトを、URL エンコードしたキーと値のペアの配列に変換します
  for (const [name, value] of Object.entries(data)) {
    urlEncodedDataPairs.push(
      `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
    );
  }

  // キーと値のペアをひとつの文字列に連結して、ウェブブラウザーのフォーム送信方式に
  // 合うよう、エンコードされた空白をプラス記号に置き換えます。
  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");

  // データが正常に送信された場合に行うことを定義します
  XHR.addEventListener("load", (event) => {
    alert("Yeah! Data sent and response loaded.");
  });

  // エラーが発生した場合に行うことを定義します
  XHR.addEventListener("error", (event) => {
    alert("Oops! Something went wrong.");
  });

  // リクエストをセットアップします
  XHR.open("POST", "https://example.com/cors.php");

  // フォームデータの POST リクエストを扱うために必要な HTTP ヘッダーを追加します
  XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  // 最後に、データを送信します
  XHR.send(urlEncodedData);
}

btn.addEventListener("click", () => {
  sendData({ test: "ok" });
});

<button>Click Me!</button>

const btn = document.querySelector("button");

function sendData(data) {
  const XHR = new XMLHttpRequest();
  const FD = new FormData();

  // データを FormData オブジェクトに投入します
  for (const [name, value] of Object.entries(data)) {
    FD.append(name, value);
  }

  // データが正常に送信された場合に行うことを定義します
  XHR.addEventListener("load", (event) => {
    alert("Yeah! Data sent and response loaded.");
  });

  // エラーが発生した場合に行うことを定義します
  XHR.addEventListener("error", (event) => {
    alert("Oops! Something went wrong.");
  });

  // リクエストをセットアップします
  XHR.open("POST", "https://example.com/cors.php");

  // FormData オブジェクトを送信するだけです。HTTP ヘッダーは自動的に設定されます
  XHR.send(FD);
}

btn.addEventListener("click", () => {
  sendData({ test: "ok" });
});

<form id="myForm">
  <label for="myName">Send me your name:</label>
  <input id="myName" name="name" value="John" />
  <input type="submit" value="Send Me!" />
</form>

window.addEventListener("load", () => {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // FormData オブジェクトと form 要素を紐づけます
    const FD = new FormData(form);

    // データが正常に送信された場合に行うことを定義します
    XHR.addEventListener("load", (event) => {
      alert(event.target.responseText);
    });

    // エラーが発生した場合に行うことを定義します
    XHR.addEventListener("error", (event) => {
      alert("Oops! Something went wrong.");
    });

    // リクエストをセットアップします
    XHR.open("POST", "https://example.com/cors.php");

    // 送信したデータは、ユーザーがフォームで提供したものです
    XHR.send(FD);
  }

  // form 要素を取得
  const form = document.getElementById("myForm");

  // 'submit' イベントのハンドラーを追加
  form.addEventListener("submit", (event) => {
    event.preventDefault();

    sendData();
  });
});

<form id="theForm">
  <p>
    <label for="theText">text data:</label>
    <input id="theText" name="myText" value="Some text data" type="text" />
  </p>
  <p>
    <label for="theFile">file data:</label>
    <input id="theFile" name="myFile" type="file" />
  </p>
  <button>Send Me!</button>
</form>

// DOM ノードにアクセスしたいため、
// ページをロードしたときにスクリプトを初期化します。
window.addEventListener("load", () => {
  // この変数は、フォームデータを格納するために使用します。
  const text = document.getElementById("theText");
  const file = {
    dom: document.getElementById("theFile"),
    binary: null,
  };

  // ファイルコンテンツへのアクセスに FileReader API を使用します。
  const reader = new FileReader();

  // FileReader API は非同期であるため、ファイルの読み取りが完了したときに
  // その結果を保存しなければなりません。
  reader.addEventListener("load", () => {
    file.binary = reader.result;
  });

  // ページを読み込んだとき、すでに選択されているファイルがあればそれを読み取ります。
  if (file.dom.files[0]) {
    reader.readAsBinaryString(file.dom.files[0]);
  }

  // 一方、ユーザーがファイルを選択したらそれを読み取ります。
  file.dom.addEventListener("change", () => {
    if (reader.readyState === FileReader.LOADING) {
      reader.abort();
    }

    reader.readAsBinaryString(file.dom.files[0]);
  });

  // sendData 関数がメインの関数です。
  function sendData() {
    // 始めに、ファイルが選択されている場合はファイルの読み取りを待たなければなりません。
    // そうでない場合は、関数の実行を遅延させます。
    if (!file.binary && file.dom.files.length > 0) {
      setTimeout(sendData, 10);
      return;
    }

    // マルチパートのフォームデータリクエストを構築するため、
    // XMLHttpRequest のインスタンスが必要です。
    const XHR = new XMLHttpRequest();

    // リクエストの各パートを定義するためのセパレータが必要です。
    const boundary = "blob";

    // 文字列としてリクエストの本体を格納します。
    let data = "";

    // そして、ユーザーがファイルを選択したときに
    if (file.dom.files[0]) {
      // リクエストの本体に新たなパートを作ります
      data += `--${boundary}\r\n`;

      // フォームデータを記述します
      data +=
        "content-disposition: form-data; " +
        // フォームデータの名前を定義します
        `name="${file.dom.name}"; ` +
        // 実際のファイル名を与えます
        `filename="${file.dom.files[0].name}"\r\n`;
      // ファイルの MIME タイプを与えます
      data += `Content-Type: ${file.dom.files[0].type}\r\n`;

      // メタデータとデータの間に空行を置きます
      data += "\r\n";

      // リクエストの本体にバイナリーデータを置きます
      data += file.binary + "\r\n";
    }

    // テキストデータの場合はシンプルです。
    // リクエストの本体に新たなパートを作ります
    data += `--${boundary}\r\n`;

    // フォームデータであることと、データの名前を示します。
    data += `content-disposition: form-data; name="${text.name}"\r\n`;
    // メタデータとデータの間に空行を置きます
    data += "\r\n";

    // リクエストの本体にテキストデータを置きます。
    data += text.value + "\r\n";

    // 完了したら、リクエストの本体を "閉じます"。
    data += `--${boundary}--`;

    // データが正常に送信された場合に行うことを定義します
    XHR.addEventListener("load", (event) => {
      alert("Yeah! Data sent and response loaded.");
    });

    // エラーが発生した場合に行うことを定義します
    XHR.addEventListener("error", (event) => {
      alert("Oops! Something went wrong.");
    });

    // リクエストをセットアップします
    XHR.open("POST", "https://example.com/cors.php");

    // マルチパートのフォームデータの POST リクエストを扱うために必要な HTTP ヘッダーを追加します。
    XHR.setRequestHeader(
      "Content-Type",
      `multipart/form-data; boundary=${boundary}`,
    );

    // データの送信
    XHR.send(data);
  }

  // フォーム要素を取得
  const form = document.getElementById("theForm");

  // 'submit' イベントのハンドラーを追加
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    sendData();
  });
});