Newt

無料ではじめる
  • ガイド
  • Form App

Fetch APIを利用した導入方法

Table of contents

Fetch API について

Fetch APIとは、HTTP通信を行うことでリソースを取得したり作成したりすることのできるJavaScript APIです。このAPIは XMLHttpRequest と似ていますが、より柔軟で強力な機能を提供します。

※Fetch APIはInternet Explorerでは対応されておらず、その他ブラウザについてもそれぞれ対応状況が異なるため、互換性については十分検討した上でお使いください。（CanIUse.comで互換表を確認できます）

Fetch API を使ってフォームを送信する

下記フォームに入力された値をFetch APIを使って送信します。

<form id="my-form">
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="body"></textarea>
    <input type="file" name="attachment" />
    <button type="submit">Submit</button>
</form>

Submitボタンをクリックした際に、フォームからデータを抽出しFetch APIを使ってForm AppのエンドポイントにPOSTリクエストを送信します。
ピュアなJavaScriptのみを利用した場合、次のようなコードになります。（React等のフレームワークを利用している場合は、stateから値を取り出すなど必要に応じて書き換えてください）

FormData形式で送信

<script>
  const form = document.getElementById("my-form");
  form.addEventListener("submit", submitFormData);

  function submitFormData(e) {
    e.preventDefault();

    // 送信データをFormData形式で作成
    const formData = new FormData();
    formData.append("name", document.querySelector('input[name="name"]').value);
    formData.append("email", document.querySelector('input[name="email"]').value);
    formData.append("body", document.querySelector('input[name="body"]').value);
    formData.append("attachment", document.querySelector('input[name="attachment"]').value);

    // Fetch APIを使ってエンドポイントにPOSTリクエストを送信
    fetch("https://{spaceUid}.form.newt.so/v1/{formUid}", {
      method: "POST",
      body: formData,
      headers: {
        // Acceptヘッダーでapplication/jsonを指定してレスポンスをJSONデータとして受け取る
        Accept: "application/json",
      },
    })
      .then((response) => console.log(response))
      .catch((error) => console.log(error));
  }
</script>
fetch関数のheadersパラメータにContent-Type（例: "Content-Type": "multipart/formdata; boudary=xxxxx;" ）を追加しないでください。fetch関数内で自動付与されるboundary文字列との差分が発生し、FormDataを正常に送信できなくなります。

JSON形式で送信

<script>
  const form = document.getElementById("my-form");
  form.addEventListener("submit", submitFormData);

  function submitFormData(e) {
    e.preventDefault();

    // 送信データをオブジェクトとして作成
    const data = {
      name: document.querySelector('input[name="name"]').value,
      email: document.querySelector('input[name="email"]').value,
      body: document.querySelector('input[name="body"]').value,
      attachment: document.querySelector('input[name="attachment"]').value,
    };

    fetch("https://{spaceUid}.form.newt.so/v1/{formUid}", {
      method: "POST",
      body: JSON.stringify(data), // JSON文字列化して送信
      headers: {
        "Content-Type": "application/json", // JSON形式でデータを送信することをサーバーに伝える
        Accept: "application/json", // レスポンスをJSONで受け取る
      },
    })
      .then((response) => console.log(response))
      .catch((error) => console.log(error));
  }
</script>
NewtMade in Newt