Kā atgriezt vairākas atlasītās opcijas JavaScript veidlapā

Vairāku atlases apstrāde JavaScript veidlapās

Darbs ar veidlapām JavaScript ir izplatīts uzdevums, īpaši, apstrādājot lietotāja ievadi, kas jāiesniedz serverim. Kopīgs izaicinājums rodas, saskaroties ar vairākas atlases veidlapās, piemēram, izmantojot nolaižamo izvēlni "atlasīt vairākus". Veidlapu pamata apstrādes metodes var neuztvert visas atlasītās opcijas, kā rezultātā tiek atgriezta tikai pēdējā atlasītā opcija.

Šajā rakstā mēs izpētīsim praktisku pieeju, lai nodrošinātu, ka visas atlasītās opcijas a vairāku atlases nolaižamā izvēlne tiek uzņemti un pareizi iesniegti, izmantojot JavaScript. Mēs apskatīsim modifikācijas, kas nepieciešamas, lai pielāgotu darba veidlapu tādai, kas efektīvi apstrādā vairākas atlases. Šī pieeja arī nodrošina, ka datus var nemanāmi iesniegt apstrādei PHP API.

Mūsu sākotnējais risinājums labi darbojas atsevišķām atlasēm, taču, pārejot uz vairāku atlases lauku, ir svarīgi atjaunināt JavaScript loģiku. Bez atbilstošiem pielāgojumiem veidlapa var atgriezt tikai pēdējo izvēlēto opciju, kas nav vēlamā darbība. Lai to novērstu, ir jāpielāgo veids, kā mēs apkopojam un apstrādājam veidlapas datus.

Līdz šīs rokasgrāmatas beigām jūs precīzi zināt, kā atjaunināt veidlapu un JavaScript, lai to apstrādātu vairākas atlasītās vērtības efektīvi. Jūs varēsiet nodrošināt, ka visas atlasītās opcijas tiek uztvertas un pareizi nodotas jūsu aizmugursistēmai.

Izpratne par to, kā rīkoties ar vairākām atlasēm JavaScript veidlapās

Iepriekš sniegto skriptu mērķis ir atrisināt bieži sastopamu tīmekļa izstrādes problēmu: vairāku atlasītu opciju iesniegšana no veidlapas serverī, izmantojot JavaScript. Sākotnējā iestatījumā veidlapā bija viena atlases nolaižamā izvēlne. Tomēr, pārejot uz a vairākkārtēja atlase nolaižamajā izvēlnē tika iesniegta tikai pēdējā atlasītā opcija. Lai to novērstu, mēs modificējam JavaScript kodu, lai apkopotu visas atlasītās opcijas, pirms tās tiek nosūtītas uz serveri, izmantojot HTTP pieprasījumu.

Pirmajā risinājumā FormData objekts tiek izmantots veidlapas elementu tveršanai, taču, tā kā vairāku atlases nolaižamās izvēlnes tiek uzskatītas par masīviem, mums ir manuāli jāatkārto opcijas. Cilpa pārbauda katru opciju nolaižamajā izvēlnē un nospiež atlasītās uz masīvu. Pēc tam šis masīvs tiek apvienots virknes formātā, ko var nosūtīt serverim. Izmantošana XMLHttpRequest nodrošina, ka dati tiek pārsūtīti asinhroni, neatsvaidzinot lapu. Šī metode ir plaši atbalstīta, lai gan pastāv modernākas pieejas.

Otrais risinājums parāda, kā rīkoties ar to pašu problēmu, izmantojot Ienest API. Fetch piedāvā tīrāku un uz solījumiem balstītu pieeju nekā XMLHttpRequest, tādējādi atvieglojot asinhrono darbību apstrādi. Tāpat kā pirmajā piemērā, atlasītās opcijas tiek apkopotas masīvā un pārveidotas par virkni. The atnest metode pēc tam nosūta šos datus uz PHP aizmugursistēmu. Šī pieeja ir efektīvāka un plaši izmantota mūsdienu tīmekļa lietojumprogrammās, pateicoties tās elastībai un intuitīvākai sintaksei.

Trešais risinājums izmanto jQuery, populāru JavaScript bibliotēku, kas vienkāršo daudzas DOM manipulācijas un Ajax darbības. Šeit atlasītās opcijas tiek tvertas, izmantojot .val() metodi, kas tieši atgriež atlasītās vērtības masīva veidā. Pēc tam masīvs tiek nosūtīts caur $.ajax(), vienkāršots veids, kā jQuery veikt HTTP pieprasījumus. Šai pieejai ir nepieciešams mazāk manuāla koda nekā iepriekšējos piemēros, padarot to par ātru risinājumu, ja jQuery jau ir iekļauts jūsu projektā.

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert("Submitted");
        }
    };
    xhttp.open("POST", "test2.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(new URLSearchParams(formData).toString());
}

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    fetch('test2.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(formData).toString()
    })
    .then(response => response.text())
    .then(result => alert("Submitted"))
    .catch(error => console.error('Error:', error));
}

$('#submitBtn').on('click', function(e) {
    e.preventDefault();
    var selectedOptions = $('#inputa').val();
    $.ajax({
        type: 'POST',
        url: 'test2.php',
        data: { 'inputa': selectedOptions },
        success: function(response) {
            alert("Submitted");
        },
        error: function() {
            alert("Error occurred");
        }
    });
});

Veidlapu datu apstrādes optimizēšana, izmantojot JavaScript vairākām atlasēm

Strādājot ar veidlapām, vairāku atlases apstrāde nolaižamajā izvēlnē ir izaicinājums, ar kuru saskaras daudzi izstrādātāji. Pēc noklusējuma HTML veidlapas tver tikai pēdējo atlasīto vērtību laukā a vairākkārtēja atlase nolaižamajā izvēlnē, kā rezultātā var tikt iesniegti nepilnīgi dati. Lai nodrošinātu visu atlasīto opciju tveršanu, pirms veidlapas datu nosūtīšanas uz aizmugursistēmu ir svarīgi atjaunināt veidu, kā tiek apstrādāti veidlapas dati.

Viena no efektīvākajām metodēm ir izmantot FormData API apvienojumā ar JavaScript spēju atkārtot atlasītās opcijas. Šis process nodrošina, ka visas atlasītās vērtības tiek uztvertas un iekļautas serverim nosūtītajos datos. Atkarībā no iestatīšanas, iespējams, būs jāveic arī datu serializācija, piemēram, izmantojot URLSearchParams, lai sagatavotu veidlapas datus formātā, ko var viegli parsēt aizmugursistēmas.

Vēl viens svarīgs aspekts, kas jāņem vērā, ir drošība un veiktspēja. Lai gan veidlapu datu apstrāde ir vienkārša, ievades apstiprināšana gan priekšgalā, gan aizmugurē ir ļoti svarīga, lai izvairītos no ievainojamībām, piemēram, injekcijas uzbrukumiem. Turklāt, izmantojot modernas API, piemēram, Ienest API nodrošina labāku veiktspēju un ļauj elastīgāk apstrādāt kļūdas, padarot veidlapas datu iesniegšanas procesu vienmērīgāku un drošāku.