【保存版】JS・jQueryでフォーム送信時にJSONデータを送信する方法を徹底解説

2024-07-02

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

FormDataとFetch APIを使う

この方法は、比較的新しいブラウザで動作し、簡潔なコードで実装できます。

手順:

JavaScriptで以下のコードを実行します。

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // デフォルトの送信処理をキャンセル

  const formData = new FormData(form); // フォームデータを取得
  const jsonObject = {}; // JSONオブジェクトを作成

  // フォームデータの各項目をループ処理
  for (const [key, value] of formData.entries()) {
    jsonObject[key] = value;
  }

  // JSONオブジェクトを文字列に変換
  const jsonString = JSON.stringify(jsonObject);

  // Fetch APIを使ってJSONデータをPOST送信
  fetch('/your-endpoint', {
    method: 'POST',
    body: jsonString,
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(data); // 送信結果を処理
  })
  .catch(error => {
    console.error(error);
  });
});

jQueryライブラリを使用すると、より簡潔なコードで記述できます。

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();

    const jsonObject = {};
    const formData = $(this).serializeArray();

    // フォームデータの各項目をループ処理
    $.each(formData, function(i, field) {
      jsonObject[field.name] = field.value;
    });

    // JSONオブジェクトを文字列に変換
    const jsonString = JSON.stringify(jsonObject);

    // jQueryを使ってJSONデータをPOST送信
    $.ajax({
      url: '/your-endpoint',
      type: 'POST',
      data: jsonString,
      contentType: 'application/json',
      success: function(data) {
        console.log(data); // 送信結果を処理
      },
      error: function(error) {
        console.error(error);
      }
    });
  });
});

補足:

上記はあくまで基本的な例です。状況に応じて、エラー処理や追加処理などを実装する必要があります。
ファイルアップロードなどの複雑な処理を行う場合は、より高度なライブラリを使用する必要がある場合があります。

HTMLフォームデータを使ってJSONオブジェクトを送信するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLフォームデータからJSONオブジェクトを送信</title>
</head>
<body>
  <h1>HTMLフォームデータからJSONオブジェクトを送信</h1>
  <form id="myForm">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email">

    <button type="submit">送信</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

JavaScript

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(form);
  const jsonObject = {};

  for (const [key, value] of formData.entries()) {
    jsonObject[key] = value;
  }

  const jsonString = JSON.stringify(jsonObject);

  fetch('/your-endpoint', {
    method: 'POST',
    body: jsonString,
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(data); // 送信結果を処理
  })
  .catch(error => {
    console.error(error);
  });
});

説明:

HTML部分では、送信したいデータに対応する入力項目 (name、email) を持つフォームを作成します。
JavaScript部分では、以下の処理が行われます。
- event.preventDefault() で、デフォルトのフォーム送信をキャンセルします。
- FormData オブジェクトを使用して、フォームデータを取得します。
- 空のオブジェクト jsonObject を作成します。
- for...of ループを使用して、フォームデータの各項目をループ処理します。
  - ループ内で、key をキー、value を値として jsonObject に追加します。
- JSON.stringify() を使用して、jsonObject をJSON文字列に変換します。
- Fetch API を使用して、JSONデータを '/your-endpoint' にPOST送信します。
  - headers オプションで、Content-Type ヘッダーを application/json に設定します。
- then メソッドで、送信結果の処理を行います。
  - レスポンスがJSON形式であることを想定し、response.json() でJSONオブジェクトに変換します。
  - 変換されたJSONオブジェクトをコンソールに出力します。
- catch メソッドで、エラー処理を行います。
  - エラーが発生した場合、コンソールにエラーメッセージを出力します。

このコードは、比較的新しいブラウザで動作します。古いブラウザで動作させる場合は、Polyfillなどの対策が必要になる場合があります。
送信結果の処理は、ご自身のアプリケーションに合わせて変更してください。

jQueryを使ったサンプルコード

jQueryライブラリを使用する場合は、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLフォームデータからJSONオブジェクトを送信</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h1>HTMLフォームデータからJSONオブジェクトを送信</h1>
  <form id="myForm">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email">

    <button type="submit">送信</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

HTMLフォームデータを使ってJSONオブジェクトを送信するその他の方法

XMLHttpRequestとJSON.stringify()を使う

この方法は、古いブラウザでも動作する比較的シンプルな方法です。

HTMLは上記と同じように作成します。

JavaScriptで以下のコードを実行します。

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-endpoint');
  xhr.setRequestHeader('Content-Type', 'application/json');

  const formData = new FormData(form);
  const jsonObject = {};

  for (const [key, value] of formData.entries()) {
    jsonObject[key] = value;
  }

  const jsonString = JSON.stringify(jsonObject);

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText)); // 送信結果を処理
    } else {
      console.error(xhr.statusText);
    }
  };

  xhr.send(jsonString);
});