HTMLのformで値をjsonでPOSTする方法

HTML

HTMLのformで値をjsonでPOSTする方法

HTMLのフォームで値をJSON形式でPOSTするには、通常のフォーム送信を使用するのではなく、JavaScriptを使って非同期リクエストを送信する方法が一般的です。
以下に、その手順を説明します。

HTMLファイル

まず、基本的なHTMLフォームを作成します。
フォームのidを指定しておくと、JavaScriptでそのフォームにアクセスしやすくなります。

<body>
  <form id="test-form">
    <label for="test-name">名前:</label>
    <input type="text" id="test-name" name="name" required>
    <br>
    <label for="test-email">メールアドレス:</label>
    <input type="email" id="test-email" name="email" required>
    <br>
    <button type="button" id="test-submit">送信</button>
  </form>

  <script src="test-script.js"></script>
</body>

JavaScriptファイル

次に、JavaScriptを使用してフォームのデータをJSON形式でサーバーにPOSTします。
この例では、fetch APIを使用して非同期リクエストを行います。

// test-script.js
document.getElementById('test-submit').addEventListener('click', function() {
  // フォーム要素を取得
  const form = document.getElementById('test-form');

  // フォームデータを取得
  const formData = new FormData(form);

  // フォームデータをJSONに変換
  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });

  // JSON形式でPOSTリクエストを送信
  fetch('https://example.com/api/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    // JSON形式に変換
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    console.log('成功:', result);
  })
  .catch(error => {
    console.error('エラー:', error);
  });
});

詳細な説明

1. HTMLフォームの作成

  • フォームにid="test-form"を設定し、フォームのinput要素にはidとname属性を設定しています。

これにより、JavaScriptでこれらの要素にアクセスしやすくなります。

2. JavaScriptでフォームデータをJSONに変換

  • FormDataオブジェクトを使用して、フォームの入力値を取得します。
  • FormDataのforEachメソッドを使って、フォームデータをオブジェクトに変換します。

このオブジェクトがJSON形式のデータとなります。

3. JSON形式でPOSTリクエストを送信

  • fetch APIを使用して、サーバーにPOSTリクエストを送信します。

fetchのmethodをPOSTに設定し、headersにContent-Typeをapplication/jsonとしてJSONデータを送信します。

  • JSON.stringifyを使って、データオブジェクトをJSON文字列に変換します。

この方法を使用することで、HTMLフォームからJSON形式でデータをPOSTリクエストで送信することができます。