Formdata di JavaScript: Panduan Definitif untuk Mengendalikan Borang

Objek

JavaScript FormData menyediakan cara yang mudah untuk mengendalikan data borang HTML, terutamanya apabila menggunakan AJAX atau fetch untuk menghantar data ke pelayan. Pembina new FormData() mencipta contoh FormData baharu.

Anda boleh menghantar elemen borang HTML secara langsung sebagai parameter kepada new FormData(). Pembina secara automatik mengumpul semua data medan input dalam borang, termasuk kotak teks, kotak semak, butang radio dan medan muat naik fail dan menambahkannya pada objek FormData.

Kelebihan menggunakan FormData

Kelebihan utama

FormData ialah ia memudahkan pemprosesan data kompleks, terutamanya apabila borang mengandungi berbilang medan atau fail. Ia secara automatik memformat data ke dalam badan permintaan HTTP yang sesuai dan menetapkan maklumat pengepala multipart/form-data yang diperlukan. Ini menjadikan FormData pilihan ideal untuk menghantar data borang secara dinamik dalam aplikasi web moden tanpa muat semula halaman, menyediakan penyelesaian pemprosesan borang yang cekap dan fleksibel.

Contoh tanpa unsur bentuk

Contoh berikut menunjukkan cara mencipta objek FormData tanpa bergantung pada elemen bentuk:

<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>

Penerangan:

1. Mencipta objek FormData kosong.
2. Tambah pasangan nilai kunci secara manual menggunakan kaedah append(). Contohnya, formData.append('nombre', 'John Serrano') menambah medan bernama nombre dengan nilai John Serrano. Anda juga boleh menambah fail secara langsung, seperti fileInput.files[0].
3. Gunakan fetch untuk menghantar objek FormData ke pelayan. fetch akan secara automatik menetapkan pengepala Content-Type kepada multipart/form-data.

Pendekatan ini berguna apabila anda perlu membina data secara dinamik tanpa bergantung pada borang HTML.

Contoh penggunaan elemen bentuk

Contoh berikut menunjukkan cara mencipta objek FormData menggunakan elemen bentuk HTML:

<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>

Penerangan:

1. Borang HTML yang mengandungi pelbagai medan input (teks, nombor, fail). Atribut name bagi setiap medan adalah penting kerana ia menentukan nama kunci dalam objek FormData.
2. Lepaskan elemen borang sebagai parameter kepada new FormData() dan pembina akan mengumpul data borang secara automatik.
3. Gunakan fetch untuk menghantar data ke pelayan.

Memproses dan mensiri data borang

Sesetengah API (seperti Pemegang Tempat JSON) tidak menerima FormData objek dan sebaliknya mengharapkan objek JSON. Untuk menukar FormData kepada JSON, anda boleh menggunakan gelung untuk mengulangi pasangan nilai kuncinya:

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

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

atau lebih ringkas Object.fromEntries():

<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>

Contoh Reaksi

<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>

Ringkasan

FormData ialah alat yang berkuasa untuk bekerja dengan data borang dalam JavaScript, yang memudahkan proses pengumpulan dan penghantaran data. Walaupun tidak semua API menyokong FormData, anda boleh menukarnya dengan mudah kepada format lain seperti JSON. Menggunakan FormData boleh meningkatkan fleksibiliti dan kecekapan dalam pemprosesan borang, terutamanya apabila menggunakan AJAX atau fetch.

Atas ialah kandungan terperinci Formdata di JavaScript: Panduan Definitif untuk Mengendalikan Borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!