XMLHttpRequestオブジェクトを使ってフォームデータを送信する方法

2024-04-05

シチュエーション例

Ajax通信でフォームデータを送信したい
リアルタイムなデータ更新を実現したい
ドラッグ＆ドロップによるファイルアップロード
フォームデザインの自由度を高めたい

実装方法

JavaScriptでフォーム送信のようなPOSTリクエストを行う方法は、主に以下の2つです。

方法1: FormDataオブジェクトを使う

FormDataオブジェクトを作成し、フォーム要素を渡す
fetch()関数を使って、POSTリクエストを送信
リクエストヘッダーにContent-Typeを設定
リクエストボディにFormDataオブジェクトを渡す

const form = document.querySelector('form');
const formData = new FormData(form);

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: formData,
})
.then(response => response.json())
.then(data => console.log(data));

方法2: XMLHttpRequestを使う

XMLHttpRequestオブジェクトを作成
open()メソッドでリクエストを開く
setRequestHeader()メソッドでリクエストヘッダーを設定
onreadystatechangeイベントリスナーを設定

const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(formData);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

ポイント

フォームデータはapplication/x-www-form-urlencoded形式でエンコードする
サーバー側の処理もPOSTリクエストに対応する必要がある

まとめ

JavaScriptでフォーム送信のようなPOSTリクエストを行う方法は、いくつかあります。それぞれの方法の特徴を理解し、状況に応じて使い分けましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <form action="/submit" method="post">
    <input type="text" name="name" value="山田太郎">
    <input type="email" name="email" value="[email protected]">
    <input type="submit" value="送信">
  </form>

  <script>
    const form = document.querySelector('form');
    const formData = new FormData(form);

    fetch('/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formData,
    })
    .then(response => response.json())
    .then(data => console.log(data));
  </script>
</body>
</html>

このコードを実行すると、フォームに入力されたデータがPOSTリクエストで/submitエンドポイントに送信されます。

ポイント

フォームのaction属性とmethod属性は、送信先のURLと送信方法を指定します。
FormDataオブジェクトにフォーム要素を渡すことで、フォームデータを取得できます。
fetch()関数のmethodオプションにPOSTを指定します。
headersオプションでContent-Typeヘッダーを設定し、エンコード形式を指定します。
bodyオプションにFormDataオブジェクトを渡すことで、リクエストボディに設定できます。

上記のコードは、fetch() APIを使用してリクエストを送信しています。従来のXMLHttpRequestオブジェクトを使用することも可能です。
サーバー側の処理は、送信されたデータを処理する必要があります。

JavaScriptでフォーム送信のようなPOSTリクエストを行う他の方法

jQueryは、JavaScriptのライブラリです。jQueryを使うと、簡単にPOSTリクエストを送信できます。

$.ajax({
  url: '/submit',
  method: 'POST',
  data: $('form').serialize(),
  success: function(data) {
    console.log(data);
  }
});

$.ajax()関数を使うと、リクエストの設定や送信処理を簡単に記述できます。

Axiosは、HTTPリクエストを行うためのJavaScriptライブラリです。Axiosを使うと、FormDataオブジェクトを簡単に送信できます。

axios.post('/submit', formData)
.then(response => console.log(response.data));

axios.post()関数を使うと、FormDataオブジェクトを簡単に送信できます。

Fetch APIは、ブラウザの標準機能です。Fetch APIを使うと、簡単にPOSTリクエストを送信できます。

const formData = new FormData(form);

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: formData,
})
.then(response => response.json())
.then(data => console.log(data));