FormDataの基本【JavaScript】

JavaScript

2024.04.06

概要
基本的な使い方
FormDataのメソッド
全てのキーと値をconsole.logでチェックする
参考

概要

FormDataオブジェクトとは、フロントエンドのデータをサーバに送るためのオブジェクトです。

これを使えば、HTMLのフォームの形式にとらわれずに、サーバにデータを送信することができます。

Ajaxと組み合わせて利用するのが一般的です。

「Ajaxって何？」という方は以下の記事をご参照ください。

基本的な使い方

下記のコードで送信先URLに、データをPost送信できます。

<input type="text" value="あいうえお" id="text-input">

<script>
  //formのvalueを取得する
  const submitText = $("#text-input").val();
 
   //FormDataを作成
   const fd = new FormData();
   //FormDataにキーと値をセット
   fd.append("text", submitText);
   //送信先URL
   const url = "https://送信先URL"
 
   //送信先URLにデータを送信する。
   $.ajax({
     url: url,
     type: "POST",
     data: fd,
     contentType: false, 
     processData: false, 
     success: function (response) {
      // 成功時の処理
     },
     error: function () {
       // エラー時の処理
     },
   });
<script>

仮にサーバサイドがPHPだとすると、$_POST[‘text’]で送信した値を受け取ることができるわけです。

FormDataのメソッド

append()：値の新規追加

let fd = new FormData();
fd.append("key","value");

同じキーの値をセットした場合は両方が共存します。

fd.append("key","value");
fd.append("key","value2");
//key:valueとkey:value2が共存する

set()：値のセット

fd.set("key","value");

同じキーの値は新しい値で更新されます。

fd.set("key","value");
fd.set("key","value2");
//key:value2だけが残る。

delete()：値の削除

//指定したキーの値を削除。
fd.delete("key");

get()・getAll()：キー指定で値の取得

//指定したキーの値を取得。
fd.get("key");

//指定したkeyのvalueが複数ある場合に、配列形式で値を取得。
fd.getAll("key");
//key:value、key:value2の２つがあった場合は[value1,value2]のように取得できる。

entries()：全てのキーと値の取得

fd.entries();
//キー・値の組み合わせを全て取得できます。

全てのキーと値をconsole.logでチェックする

セットしたキーと値を全てconsole.logで出力することもできます。

先述のentriesを利用します。

fd.append("key1","value1");
fd.append("key2","value2");
fd.append("key3","value3");

for (let value of fd.entries()) {
    console.log(value);
  }

//以下のように出力される
// ['key1', 'value1']
// ['key2', 'value2']
// ['key3', 'value3']