Bincangkan mengapa JS perlu bersiri sebelum menyerahkan borang

Javascript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam bahagian hadapan web. Dalam pembangunan web, penyerahan borang adalah operasi yang sangat biasa, dan dalam Javascript, data borang biasanya perlu bersiri sebelum menyerahkan borang. Artikel ini bertujuan untuk meneroka sebab Javascript perlu disiri sebelum menyerahkan borang dan cara penyiaran dilaksanakan.

1. Mengapa siri data borang diperlukan

Dalam HTML, borang ialah cara asas untuk mengumpul maklumat input pengguna. Apabila pengguna mengklik butang hantar, borang diserahkan secara automatik ke pelayan bahagian belakang untuk diproses. Dalam Javascript, kita sering perlu menyerahkan data borang secara tidak segerak melalui teknologi AJAX untuk mengelakkan lompatan halaman. Sebelum menyerahkan data borang, data borang perlu diserikan ke dalam format rentetan dan kemudian dihantar ke pelayan bahagian belakang untuk diproses melalui teknologi AJAX.

Jadi mengapa anda perlu mensiri data borang? Ini kerana apabila borang diserahkan, penyemak imbas akan secara automatik mengekod data dalam borang dan menggantikan aksara dan ruang khas dengan format pengekodan URL Sebagai contoh, ruang akan ditukar kepada "%20". Format pengekodan URL adalah selamat semasa penghantaran, tetapi penyahkodan diperlukan semasa pemprosesan pelayan latar belakang untuk mendapatkan data asal. Oleh itu, untuk mengelakkan pelayan bahagian belakang tidak dapat menyahkod data dengan betul, kami perlu mensiri data borang dan menukarnya kepada format rentetan sebelum menyerahkannya.

2. Kaedah penyirian data borang

Dalam Javascript, data borang boleh disirikan dalam dua cara berikut.

1. Menggunakan objek FormData

FormData ialah jenis data yang baru diperkenalkan dalam HTML5. Ia boleh menukar data borang kepada objek formData, menjadikannya mudah untuk menggunakan teknologi AJAX untuk memuat naik fail secara tidak segerak atau menyerahkan data borang dalam Javascript. Kelebihan menggunakan objek FormData untuk mensiri data borang ialah ia menyokong memuat naik berbilang fail pada masa yang sama.

Kaedah pelaksanaan khusus adalah seperti berikut:

const form = document.querySelector('#myForm');
const formData = new FormData(form);

Selepas membina data borang menjadi objek formData, anda boleh menggunakan teknologi AJAX untuk menyerahkan data borang secara tidak segerak.

2. Tulis sendiri fungsi bersiri

Memandangkan objek FormData tidak menyokong pelayar IE 9 dan ke bawah, kami perlu menulis sendiri beberapa kod untuk melaksanakan urutan data borang berubah. Berikut ialah fungsi yang boleh menyerikan data borang ke dalam format rentetan:

function serialize(form) {
    let data = '';
    for(let i = 0; i < form.elements.length; i++) {
        let field = form.elements[i];
        if(field.type !== 'checkbox' && field.type !== 'radio' || field.checked) {
            data += encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value) + '&';
        }
    }
    return data.slice(0, -1);
}

Fungsi ini menerima borang sebagai parameter, dan kemudian menyerikan datanya ke dalam format rentetan dengan merentasi elemen borang.

3. Kesimpulan

Dalam Javascript, mensiri borang adalah langkah penting sebelum menyerahkan data borang. Mensiri borang boleh mengelakkan masalah bahawa pelayan bahagian belakang tidak dapat menyahkod data dengan betul, dan pada masa yang sama, ia boleh menggunakan teknologi AJAX dengan mudah untuk penyerahan dan pemprosesan tak segerak. Untuk penyemak imbas yang tidak menyokong objek FormData, kami boleh menulis fungsi bersiri kami sendiri untuk mensiri data borang.

Atas ialah kandungan terperinci Bincangkan mengapa JS perlu bersiri sebelum menyerahkan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!