Dërgimi i formularit ajax në server duke përdorur jquery

Përmbajtje:

Dërgimi i formularit ajax në server duke përdorur jquery
Dërgimi i formularit ajax në server duke përdorur jquery
Anonim

Sa herë keni hasur në faktin që keni futur të dhëna të pasakta, për shkak të të cilave faqja ka ringarkuar dhe ka fshirë plotësisht karakteret e futura në fusha. Për ta rregulluar këtë, ekziston një qasje mjaft popullore për ndërtimin e një ndërfaqeje përdoruesi, dhe emri i saj është ajax. Shfaqet në shumë projekte dhe përdoret në shumë mënyra.

Dërgimi i një formulari ajax: lidhja e bibliotekave

Përfshi bibliotekën jquery në index.php.


Ka një mënyrë tjetër për të përfshirë jquery në një dokument. Ju duhet të shkarkoni bibliotekën nga faqja zyrtare e jquery, ta vendosni në dosjen e duhur dhe të ngjisni lidhjen me të si kjo:


Lidhja dhe konfigurimi i dokumenteve

1. Krijoni një dokument.php në dosjen me sitin me çdo emër të përshtatshëm për ju - kjo do të jetë dërgimi i formularit ajax php. Në të mund të shkruani se në çfarë formati do të shfaqet teksti me mesazhin. Për shembull, form1.php.

Dosja e faqes
Dosja e faqes

2. Në dosjen tuaj të skedarëve javascript, krijoni një skedar.js mendonjë emër i përshtatshëm. Për shembull, form.js.

dosje js
dosje js

3. Lidheni këtë dosje me dokumentin tuaj.


4. Krijo një formular me parametrat e mëposhtëm:


Në të, mos harroni të krijoni fusha për futjen e të dhënave tuaja.

5. Shkoni te skedari form1.php në drejtorinë me sitin, në të cilin shkruani:

Tani, kur dorëzoni formularin, shfletuesi do të shfaq informacione rreth të dhënave.

Në të njëjtin skedar, mund të shkruani se çfarë saktësisht do të shfaqet ose si. Këtu mund të shkruani edhe cikle ose algoritme.

Dërgimi i formularit ajax jquery

1. Në skedarin e krijuar form.js, duhet të shkruani kodin që është përgjegjës për funksionimin e skedarit pasi faqja e faqes të jetë ngarkuar plotësisht.


$(document).ready(function(){ //Kodi ynë i ardhshëm do të ekzekutohet këtu });

2. Pastaj ju duhet të personalizoni butonin e dorëzimit. Bëji të gjitha në të njëjtin skedar.


$("forma").submit(funksion(ngjarje) { event.preventDefault(); //kodi i mëposhtëm do të shkruhet këtu });

Pjesa e parë e kodit është përgjegjëse për zgjedhjen e elementit në faqe dhe e dyta është përgjegjëse për parandalimin e veprimit të paracaktuar.

3. Pastaj, për shembull, merrni një paraqitje të formularit ajax për sukses.


$.ajax({ lloji: $(this).attr('metodë'), url: $(this).attr('veprim'), të dhëna: FormData e re(this), Lloji i përmbajtjes: false, cache: false, procesi Të dhënat: false, suksesi: funksioni(rezultati){ alarm(rezultati); } });

Në vijim janë përshkrimet e hollësishme të secilit cilësim.

  • lloj -ky është lloji i kërkesës që paraqitet në formular; meqenëse kushton POST, lloji i kërkesës do të jetë i përshtatshëm;
  • this - zgjedhja e elementit brenda konstruktit;
  • attr - shkurtim për tërheqje (tërheqje), domethënë tërhiqet një parametër i caktuar i objektivit (formës) së zgjedhur;
  • url - parametri përgjegjës për vendin ku do të dërgohet kërkesa; në këtë rast, çfarë shkruhet në parametrat e formës (form1.php);
  • data - specifikon të dhënat e formularit;
  • contentType - përgjegjës për dërgimin e titujve në server; në këtë rast nuk është e nevojshme;
  • cache - përgjegjëse për ruajtjen e memories së përdoruesit;
  • processData - përgjegjëse për konvertimin e të dhënave në një varg;
  • sukses - shfaq rezultatin e një paraqitjeje të suksesshme të të dhënave; prandaj, nëse dërgimi i të dhënave ishte i suksesshëm, atëherë veprimet e funksionit ekzekutohen.

4. U krye, tani kur dorëzoni formularin ajax, do të merrni të dhëna pa rifreskuar faqen.

Rezultati mund të ndryshohet duke përdorur skedarin form1.php, ku mund të specifikoni se çfarë saktësisht do të shfaqet si rezultat. Për shembull, Mund të eksperimentoni dhe të krijoni një kontroll për korrektësinë e futjes së të dhënave të caktuara: nëse të dhënat nuk janë të sakta, atëherë shfaqet mesazhi i dëshiruar, përndryshe ai ridrejtohet në faqen e duhur. Shumë gjëra të tjera janë gjithashtu të mundshme, çfarëdo që të dojë zemra.

shembull ajax
shembull ajax

Ekziston gjithashtu dërgimi i të dhënave në server në mënyrë asinkrone. Kjo është kur përdoruesi fut tekst, dhe ai menjëherë theksohet me të kuqe, duke treguar se të dhënat e futura nuk janë të sakta. Rreth sajka shumë manuale në internet, ku gjithçka shpjegohet qartë dhe tregohet me shembuj.

Përfundim

Padyshim, ajax është një mjet i dobishëm në ndërtimin e faqeve të internetit. Për të krijuar faqe dhe ndërfaqe me cilësi të lartë, është thjesht e nevojshme. Vlen të përmendet se është shumë e rëndësishme të njihni jQuery për të kuptuar plotësisht figurën dhe atë që shkruhet në kod, sepse një copy-paste e thjeshtë nuk mund t'ju ndihmojë gjithmonë dhe t'ju mësojë të kuptoni kodin. Gjithmonë ia vlen të kujtohet se versionet e gjuhës janë përditësuar dhe disa veçori thjesht mund të zhduken. Prandaj, jo të gjitha zgjidhjet mund të jenë të rëndësishme, shpesh kodi i shkruar thjesht nuk funksionon ose nuk prodhon rezultatin që dëshironi të shihni në ekranin tuaj.

Recommended: