Bagaimana untuk Menukar HTML5 FormData kepada JSON untuk Komunikasi Pelanggan-Pelayan?

Menukar HTML5 FormData kepada JSON

Menukar objek HTML5 FormData kepada JSON membolehkan penyirian data borang ke dalam format yang boleh dibaca mesin. Ini berguna untuk menghantar data antara klien dan pelayan.

Kaedah Menggunakan Objek Tersuai dan JSON.stringify

Untuk menukar entri FormData kepada JSON tanpa jQuery atau bersiri keseluruhan objek:

<code class="javascript">var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);</code>

Kemas kini 1: Fungsi Anak Panah ES6

Menggunakan fungsi anak panah ES6:

<code class="javascript">var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);</code>

Kemas kini 2: Sokongan untuk Elemen Berbilang Nilai

Untuk senarai berbilang pilihan atau elemen bentuk lain dengan berbilang nilai:

<code class="javascript">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);</code>

Kemas kini 3: Penghantaran Terus BorangData

Untuk menghantar FormData ke pelayan melalui XMLHttpRequest:

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

Atau menggunakan API Ambil:

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

Kemas kini 4: Kaedah Custom toJSON untuk Kompleks Objek

Untuk objek tersuai, tentukan kaedah toJSON untuk mensiri kandungannya. Rujuk dokumentasi MDN untuk mendapatkan maklumat lanjut tentang had JSON.stringify.

Atas ialah kandungan terperinci Bagaimana untuk Menukar HTML5 FormData kepada JSON untuk Komunikasi Pelanggan-Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!