Kelių pasirinkimų tvarkymas „JavaScript“ formose
Darbas su „JavaScript“ formomis yra įprasta užduotis, ypač apdorojant vartotojo įvestį, kurią reikia pateikti serveriui. Bendras iššūkis iškyla sprendžiant formose, pvz., naudojant išskleidžiamąjį meniu „Pasirinkti kelis“. Pagrindiniai formų tvarkymo metodai gali neužfiksuoti visų pasirinktų parinkčių, todėl bus grąžinta tik paskutinė pasirinkta parinktis.
Šiame straipsnyje mes išnagrinėsime praktinį metodą, kaip užtikrinti, kad visos pasirinktos parinktys a yra užfiksuoti ir tinkamai pateikti naudojant „JavaScript“. Išnagrinėsime pakeitimus, kurių reikia norint pritaikyti darbo formą tokiai, kuri efektyviai tvarko kelis pasirinkimus. Šis metodas taip pat užtikrina, kad duomenis būtų galima sklandžiai pateikti į PHP API apdoroti.
Mūsų pradinis sprendimas puikiai tinka pavieniams pasirinkimams, bet kai pereiname prie kelių pasirinkimų lauko, svarbu atnaujinti „JavaScript“ logiką. Be tinkamų koregavimų, forma gali grąžinti tik paskutinę pasirinktą parinktį, kuri nėra pageidaujama. Norėdami tai išspręsti, reikia keisti, kaip renkame ir apdorojame formos duomenis.
Šio vadovo pabaigoje tiksliai žinosite, kaip atnaujinti formą ir „JavaScript“. efektyviai. Galėsite užtikrinti, kad visos pasirinktos parinktys būtų užfiksuotos ir tinkamai perduotos jūsų vidiniam įrenginiui.
komandą | Naudojimo pavyzdys |
---|---|
FormData() | Šis konstruktorius sukuria naują FormData objektą, kuris fiksuoja formos duomenų elementus. Jis naudojamas lengvai rinkti formos įvestis, įskaitant failų įkėlimą, nekartojant kiekvieno įvesties lauko rankiniu būdu. |
getElementsByName() | Nuskaito HTML elementus su konkrečiu atributas. Scenarijuje jis naudojamas nukreipti į elementą, kad užfiksuotumėte visas pasirinktas parinktis. |
options[] | Pasiekite atskiras pasirinkto elemento parinktis. Šis į masyvą panašus rinkinys leidžia kartoti pasirinktas parinktis, o tai labai svarbu atliekant kelis pasirinkimus. |
selected | Naudojamas cikle norint nustatyti, ar pasirinkta konkreti parinktis. Tai padeda išfiltruoti nepasirinktas parinktis kelių pasirinkimų išskleidžiamajame meniu. |
set() | Metodas set() iškviečiamas FormData objekte, kad būtų atnaujintas arba įtrauktas rakto ir reikšmių poros, pvz., visų pasirinktų verčių iš kelių pasirinkimų išskleidžiamojo meniu pridėjimas prie formos duomenų prieš juos siunčiant. |
URLSearchParams() | Tai žiniatinklio API, kuri nuosekliai sujungia formos duomenis į užklausos eilutę. Čia jis naudojamas konvertuoti FormData objektą į eilutės formatą, tinkamą HTTP užklausoms. |
XMLHttpRequest() | Plačiai naudojama API HTTP užklausoms siųsti. Jis naudojamas asinchroniniam duomenų pateikimui iš priekinės dalies į serverį, kad puslapis išliktų reaguojantis. |
fetch() | Šiuolaikinė XMLHttpRequest() alternatyva fetch() naudojama HTTP užklausoms pateikti intuityviau ir naudojant pažadais pagrįstą sintaksę. Tai užtikrina švaresnį ir glaustesnį tinklo užklausų tvarkymą. |
$.ajax() | jQuery komanda, kuri supaprastina asinchroninių HTTP užklausų pateikimą. Jis palaiko sudėtingas konfigūracijas ir yra naudojamas tvarkyti kelis pasirinkimus ir pateikti juos serveriui. |
Supratimas, kaip tvarkyti kelis pasirinkimus „JavaScript“ formose
Aukščiau pateiktais scenarijais siekiama išspręsti dažną interneto kūrimo problemą: kelių pasirinktų parinkčių pateikimas iš formos į serverį naudojant JavaScript. Pradinėje sąrankoje formoje buvo vienas pasirinkimo išskleidžiamasis meniu. Tačiau perėjus į a išskleidžiamajame sąraše, buvo pateikta tik paskutinė pasirinkta parinktis. Norėdami tai išspręsti, modifikuojame „JavaScript“ kodą, kad surinktume visas pasirinktas parinktis prieš išsiųsdami jas į serverį per HTTP užklausą.
Pirmajame sprendime, objektas naudojamas formos elementams užfiksuoti, bet kadangi jis traktuoja kelių pasirinkimų išskleidžiamuosius meniu kaip masyvus, turime pakartoti parinktis rankiniu būdu. Ciklas patikrina kiekvieną išskleidžiamojo meniu parinktį ir perkelia pasirinktas į masyvą. Tada šis masyvas sujungiamas į eilutės formatą, kuris gali būti siunčiamas į serverį. Naudojimas užtikrina, kad duomenys būtų perduodami asinchroniškai, neatnaujinant puslapio. Šis metodas yra plačiai palaikomas, nors yra ir modernesnių metodų.
Antrasis sprendimas parodo, kaip tą pačią problemą išspręsti naudojant . „Fetch“ siūlo švaresnį ir labiau pažadais pagrįstą metodą nei XMLHttpRequest, todėl lengviau atlikti asinchronines operacijas. Kaip ir pirmame pavyzdyje, pasirinktos parinktys surenkamos į masyvą ir konvertuojamos į eilutę. The Tada metodas siunčia šiuos duomenis į PHP užpakalinę programą. Šis metodas yra efektyvesnis ir plačiai taikomas šiuolaikinėse žiniatinklio programose dėl savo lankstumo ir intuityvesnės sintaksės.
Trečiasis sprendimas naudoja jQuery, populiarią „JavaScript“ biblioteką, kuri supaprastina daugelį DOM manipuliacijų ir „Ajax“ operacijų. Čia pasirinktos parinktys užfiksuojamos naudojant metodas, kuris tiesiogiai grąžina pasirinktas reikšmes masyvo pavidalu. Tada masyvas siunčiamas per , supaprastintas būdas atlikti HTTP užklausas „jQuery“. Šis metodas reikalauja mažiau rankinio kodo nei ankstesniuose pavyzdžiuose, todėl tai yra greitas sprendimas, kai jQuery jau įtraukta į jūsų projektą.
Kelių pasirinkimų tvarkymas „JavaScript“ PHP formos pateikimui
„JavaScript“ su XMLHttpRequest, kad būtų galima pateikti formą su keliomis pasirinktomis reikšmėmis PHP vidiniam įrenginiui.
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());
}
Kelių pasirinkimų tvarkymas naudojant Fetch API, kad būtų padidintas efektyvumas
„JavaScript“ su „Fetch API“, kad pateiktų formą su keliomis pasirinktomis parinktimis PHP vidiniam įrenginiui.
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));
}
Kelių pasirinkimų tvarkymas naudojant supaprastintą sintaksę naudojant „jQuery“.
Naudojant jQuery rinkti ir pateikti PHP pasirinktoms parinktims.
$('#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");
}
});
});
Formų duomenų tvarkymo optimizavimas naudojant „JavaScript“ keliems atrankoms
Kai dirbate su formomis, kelių pasirinkimų tvarkymas išskleidžiamajame meniu yra iššūkis, su kuriuo susiduria daugelis kūrėjų. Pagal numatytuosius nustatymus HTML formos užfiksuoja tik paskutinę pasirinktą reikšmę a išskleidžiamąjį meniu, dėl kurio gali būti pateikti neišsamūs duomenys. Norint užtikrinti, kad visos pasirinktos parinktys būtų užfiksuotos, labai svarbu atnaujinti formos duomenų apdorojimo būdą prieš siunčiant juos į užpakalinę programą.
Vienas iš efektyviausių būdų yra naudoti API, kartu su „JavaScript“ galimybe kartoti pasirinktas parinktis. Šis procesas užtikrina, kad visos pasirinktos reikšmės būtų užfiksuotos ir įtrauktos į serveriui siunčiamus duomenis. Atsižvelgiant į sąranką, taip pat gali tekti tvarkyti duomenų serializavimą, pvz., naudoti , paruošti formos duomenis tokiu formatu, kurį gali lengvai išanalizuoti užpakalinės sistemos.
Kitas svarbus aspektas, į kurį reikia atsižvelgti, yra saugumas ir našumas. Nors formos duomenis tvarkyti nesudėtinga, norint išvengti pažeidžiamumo, pvz., įpurškimo atakų, labai svarbu patvirtinti įvestį tiek priekinėje, tiek vidinėje sistemoje. Be to, naudojant šiuolaikines API, pvz užtikrina geresnį našumą ir leidžia lanksčiau tvarkyti klaidas, todėl formos duomenų pateikimo procesas tampa sklandesnis ir saugesnis.
- Kaip gauti kelias pasirinktas parinktis „JavaScript“?
- Galite naudoti būdas gauti pasirinktą elementą ir pereiti per jį norėdami gauti pasirinktas reikšmes.
- Koks yra geriausias būdas pateikti kelis pasirinkimus naudojant „JavaScript“?
- Naudojant objektą, galite rinkti formos įvestis ir rankiniu būdu apdoroti kelis pasirinkimus, kartodami juos ir pridėdami reikšmes prie duomenų.
- Ar galiu naudoti „Fetch API“ formai pateikti?
- Taip, suteikia modernų būdą siųsti HTTP užklausas, įskaitant formos duomenis, naudojant švaresnę sintaksę ir geresnį klaidų tvarkymą.
- Kuo skiriasi Fetch API ir XMLHttpRequest?
- Nors abu gali siųsti HTTP užklausas, yra modernesnis, naudojant pažadus geresniam asinchroniniam valdymui, tuo tarpu naudoja atgalinius skambučius.
- Kaip galiu tvarkyti klaidas pateikiant formą?
- Galite įtraukti klaidų valdymo logiką arba metodus, kaip sugauti ir reaguoti į visas problemas, kylančias formos pateikimo proceso metu.
Norint tvarkyti kelias pasirinktas parinktis „JavaScript“ formose, reikia pritaikyti, kaip apdorojami formos duomenys. Peržiūrėdami pasirinktas parinktis ir užfiksuodami kiekvieną reikšmę, galite užtikrinti, kad pateikiant formą būtų įtraukti visi pasirinkimai.
Nesvarbu, ar naudojate , , arba jQuery, kiekvienas metodas leidžia efektyviai ir saugiai pateikti formą PHP užpakalinei programai. Tinkamo požiūrio pasirinkimas priklauso nuo konkrečių projekto poreikių ir jau turimų įrankių.
- Kelių pasirinktų parinkčių tvarkymo JavaScript formose paaiškinimas, įskaitant tokius metodus kaip ir . Galima rasti adresu: MDN žiniatinklio dokumentai: „FormData“.
- Išsamus naudojimo vadovas Norėdami siųsti duomenis asinchroniškai JavaScript: MDN žiniatinklio dokumentai: XMLHttpRequest
- Išsami instrukcija, kaip naudoti tinklo užklausoms tvarkyti: MDN žiniatinklio dokumentai: iškviesti API
- jQuery dokumentacija formoms pateikti naudojant : jQuery: $.ajax()