JavaScriptのformdata：フォームを処理するための決定的なガイド

JavaScript の FormData オブジェクトは、特に AJAX または fetch を使用してサーバーにデータを送信する場合に、HTML フォーム データを処理する便利な方法を提供します。 new FormData() コンストラクターは、新しい FormData インスタンスを作成します。

HTML フォーム要素をパラメータとして new FormData() に直接渡すことができます。コンストラクターは、テキスト ボックス、チェック ボックス、ラジオ ボタン、ファイル アップロード フィールドなど、フォーム内のすべての入力フィールド データを自動的に収集し、FormData オブジェクトに追加します。

FormData を使用する利点

FormData の主な利点は、特にフォームに複数のフィールドまたはファイルが含まれている場合に、複雑なデータの処理が簡素化されることです。データは自動的に適切な HTTP リクエスト本文にフォーマットされ、必要な multipart/form-data ヘッダー情報が設定されます。 このため、FormData は、ページを更新せずに最新の Web アプリケーションでフォーム データを動的に送信するための理想的な選択肢となり、効率的で柔軟なフォーム処理ソリューションを提供します。

フォーム要素を使用しない例

次の例は、フォーム要素に依存せずに FormData オブジェクトを作成する方法を示しています。

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

説明:

空の
1. オブジェクトを作成します。 FormData
2. メソッドを使用してキーと値のペアを手動で追加します。たとえば、append() は、formData.append('nombre', 'John Serrano') という値を持つ nombre という名前のフィールドを追加します。 John Serrano など、ファイルを直接追加することもできます。 fileInput.files[0]
3. を使用して、fetch オブジェクトをサーバーに送信します。 FormData は、fetch ヘッダーを自動的に Content-Type に設定します。 multipart/form-data

このアプローチは、HTML フォームに依存せずにデータを動的に構築する必要がある場合に役立ちます。

フォーム要素の使用例

次の例は、HTML フォーム要素を使用して

オブジェクトを作成する方法を示しています。 FormData

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

説明:

さまざまな入力フィールド (テキスト、数値、ファイル) を含む HTML フォーム。各フィールドの

属性は、
1. オブジェクト内のキー名を決定するため、非常に重要です。 name FormDataフォーム要素をパラメーターとして
に渡すと、コンストラクターがフォーム データを自動的に収集します。
2. new FormData()
を使用してサーバーにデータを送信します。
3. fetch

フォームデータの処理とシリアル化

一部の API (JSON プレースホルダーなど) は

オブジェクトを受け入れず、代わりに JSON オブジェクトを期待します。

を JSON に変換するには、ループを使用してキーと値のペアを反復処理します。 FormData FormData

またはより簡潔に

<code class="language-javascript">const obj = {};
const formData = new FormData(form);

for (const key of formData.keys()) {
  obj[key] = formData.get(key);
}</code>

:

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

race react example

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

概要

は、JavaScriptのフォームデータを処理するための強力なツールであり、データ収集と送信プロセスを簡素化します。すべてのAPIがサポートしているわけではありませんが、

をサポートしていますが、JSONなどの他の形式に簡単に変換できます。 特にAJAXまたは

を使用する場合、フォーム処理の柔軟性と効率を改善するには、を使用してください。 FormData

以上がJavaScriptのformdata：フォームを処理するための決定的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。