JavaScript の「FormData」オブジェクトについて知っておくべきことすべて-jsチュートリアル-php.cn

JavaScript の「FormData」オブジェクトについて知っておくべきことすべて

Patricia Arquette

リリース： 2024-11-23 02:22:10

オリジナル

802 人が閲覧しました

Sve što treba da znate o `FormData` objektu u JavaScript-u

JavaScript で HTML フォームのデータを操作する場合、多くの場合、そのデータを収集、操作し、サーバーに送信する必要があります。ここで、強力で柔軟なフォーム管理 API である FormData が登場します。この投稿では、FormData の仕組み、その利点、実際のシナリオでの使用方法について詳しく説明します。

フォームデータとは何ですか?

FormData は、次のことを可能にする埋め込み JavaScript オブジェクトです。

HTML フォームからの簡単なデータ収集。
フェッチ API または XMLHttpRequest を使用してそのデータをサーバーに送信します。
ファイルなどのバイナリデータを操作します。

このオブジェクトは、multipart/form-data MIME タイプに従ってデータを自動的にフォーマットするため、ファイルなどの複雑なデータの送信に最適です。

FormData オブジェクトを作成するにはどうすればよいですか?

空の FormData オブジェクトの作成

データを手動で追加する場合は、空の FormData コンストラクターを使用します。

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

ログイン後にコピー

フォームから FormData オブジェクトを作成する

HTML フォームがある場合は、フォーム参照を FormData コンストラクターに直接渡すことができ、そこからすべてのデータが自動的に収集されます。

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

ログイン後にコピー

データの追加

データは .append(key, value) メソッドを使用して追加されます:

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

ログイン後にコピー

からファイルを追加する場合は、.files[0]:
を使用してください。

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

ログイン後にコピー

データの読み取り

FormData オブジェクト内のデータを反復処理するには、for...of ループと .entries() メソッドを使用します。

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

ログイン後にコピー

FormData データをサーバーに送信する

FormData は、フェッチ API を使用してサーバーにデータを送信するのに最適です。簡単な例を次に示します:

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

ログイン後にコピー

Content-Type ヘッダーを手動で設定する必要はありません。 FormData はこれを自動的に行います。

FormData の利点

ファイルの操作

FormData を使用すると、から直接ファイルを簡単に追加して送信できます。フィールド。
自動シリアル化

データを手動でフォーマットする代わりに、FormData はデータを multipart/form-data に自動的にフォーマットします。
柔軟性

データの反復および更新機能など、キーと値のペアの管理が簡単です。
バイナリデータのサポート

画像、PDF、その他のファイルなどのバイナリデータを送信するのに最適です。

実践例: 登録フォーム

これは、フォームからデータを収集してサーバーに送信する完全な例です:

HTMLフォーム

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

ログイン後にコピー

役立つヒント

データを手動で変更する場合は、.append() の代わりに .set(key, value) を使用します。
.has(key) メソッドを使用して、特定のキーが存在するかどうかを確認できます。
データを削除するには、.delete(key) を使用します。

結論

FormData は、フォームデータを操作するための強力なツールです。ファイルを操作する場合でも、データの収集、操作、送信が簡単に行えます。その柔軟性と最新の JavaScript API との簡単な統合により、多くの Web アプリケーションにとって不可欠なものとなっています。

以上がJavaScript の「FormData」オブジェクトについて知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。