Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah cara saya Menukar HTML5 FormData kepada JSON?

Bagaimanakah cara saya Menukar HTML5 FormData kepada JSON?

DDD
DDDasal
2024-10-26 11:07:301008semak imbas

How do I Convert HTML5 FormData to JSON?

Menukar HTML5 FormData kepada JSON

Menukar masukan objek HTML5 FormData kepada JSON ialah tugas biasa dalam pembangunan web. Walaupun terdapat pelbagai pendekatan untuk mencapai matlamat ini, kaedah yang paling mudah dan cekap ialah menggunakan fungsi forEach() secara langsung pada objek FormData.

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

Pendekatan ini berulang melalui setiap pasangan nilai kunci dalam FormData objek dan menambahkannya pada objek JavaScript baharu. Kaedah JSON.stringify() kemudiannya digunakan untuk menukar objek kepada rentetan JSON.

Kemas kini: Fungsi Anak Panah ES6

Bagi mereka yang lebih suka sintaks ES6, penyelesaian yang sama boleh ditulis menggunakan fungsi anak panah:

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

Kemas kini 2: Sokongan untuk Elemen Borang Berbilang Nilai

Untuk menyokong elemen borang dengan berbilang nilai, seperti berbilang -pilih senarai, kod berikut boleh digunakan:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

Kemas kini 3: Penyerahan Terus melalui XMLHttpRequest dan API Ambil

Menghantar FormData terus ke pelayan tanpa penukaran adalah mungkin menggunakan objek XMLHttpRequest atau Fetch API:

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>
<code class="javascript">fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});</code>

Kemas kini 4: Pensirilan JSON Objek Kompleks

Logik siri tersuai boleh ditakrifkan untuk kompleks objek melalui kaedah toJSON().

Atas ialah kandungan terperinci Bagaimanakah cara saya Menukar HTML5 FormData kepada JSON?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn