1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FormDataオブジェクトについて 配列の取り扱い

Posted at

業務の中で、FormDataで配列を送信したい時の構文を学んだのでメモです。
もし間違いなどあればご指摘お願いします!

FormDataオブジェクトは、HTMLフォームのデータを簡単に扱うためのJavaScript API。フォームのデータをサーバーに送信する際に使う。特に、ファイルアップロードや複数の値を含むフォームデータを扱う際に便利。

配列の要素をFormDataに追加する

通常、フォームの入力項目は単一の値を持つ。しかし、場合によってはフォームに配列形式のデータ(例えば複数の選択肢や複数の関連する値)を送信したい場合があり、これを実現するために、FormDataオブジェクトに配列の要素を追加する必要がある。

基本的な構文

配列の要素を追加する際の基本的な構文は以下。

formData.append('配列の名前[]', );

この構文を使って、配列の各要素を追加します。配列の名前の後に [] を付けることが重要。これにより、サーバー側でこれらの値が配列として扱われるようになる。

具体的な例
let formData = new FormData();
formData.append('user[skills][]', 'JavaScript');
formData.append('user[skills][]', 'Python');
formData.append('user[skills][]', 'HTML');

この例では、user[skills][] という名前で3つのスキルを追加しています。サーバーに送信されると、user[skills] は ['JavaScript', 'Python', 'HTML'] という配列として解釈される。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?