Sådan bruges AJAX til at sende en webformular

Reklame

Du har måske læst vores jQuery guide En grundlæggende guide til JQuery til Javascript-programmerereHvis du er en Javascript-programmør, hjælper denne guide til JQuery dig med at starte kodning som en ninja. Læs mere , såvel som del fem af vores jQuery-tutorial om AJAX jQuery-tutorial (del 5): AJAX dem alle!Da vi nær ved slutningen af ​​vores mini-tutorial-serie jQuery, er det på tide at vi kaster et mere dybtgående kig på en af ​​de mest anvendte funktioner i jQuery. AJAX giver et websted mulighed for at kommunikere med ... Læs mere , men i dag viser jeg dig, hvordan du bruger AJAX til dynamisk at sende en webformular. JQuery er langt den nemmeste måde at bruge AJAX, så check vores komme i gang tutorial jQuery-tutorial - Kom godt i gang: Basics & SelectorsSidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ... Læs mere hvis du er nybegynder. Lad os hoppe lige ind.

Hvorfor bruge AJAX

Du undrer dig måske "Hvorfor har jeg brug for AJAX?" HTML er perfekt i stand til at indsende formularer og gør det på en ret smertefri måde. AJAX implementeres på et stort flertal af websider, og dens popularitet fortsætter med at stige.

Den enorme fordel, som AJAX bringer, er evnen til delvis belastning dele af websider. Dette får sider til at se hurtigere og mere lydhøre ud og sparer båndbredde ved kun at skulle indlæse en lille del data i stedet for hele siden. Her er nogle grundlæggende AJAX-brugssager:

• Kontroller regelmæssigt for nye e-mails.
• Opdater en live fodboldscore hvert 30. sekund.
• Opdater prisen for en online-auktion.

AJAX giver dig, udvikleren, en næsten ubegrænset mulighed for at lave websider hurtig, lydhør og snappy - noget som dine besøgende vil takke dig for.

HTML

Inden du kommer i gang, har du brug for en HTML-form. Hvis du ikke ved, hvad HTML er, skal du læse vores vejledning om hvordan man laver et websted for begyndere Sådan oprettes et websted: For begyndereI dag vil jeg guide dig gennem processen med at oprette et komplet websted fra bunden. Bare rolig, hvis dette lyder svært. Jeg vil guide dig gennem det hvert skridt på vejen. Læs mere .

Her er den HTML, du har brug for:

 Navn: Alder: 

Denne html definerer en formular med et par elementer. Bemærk, hvordan der er handling og metode egenskaber. Disse definerer hvor og hvordan formularen indsendes. De er ikke nødvendige, når du bruger AJAX, men det er en god ide at bruge dem, da det sikrer, at besøgende på dit websted stadig kan bruge det, hvis de har JavaScript deaktiveret. Denne side inkluderer jQuery hostet af Google på deres CDN Hvad CDN'er er og hvorfor lagring ikke længere er et problemCDN'er gør internettet hurtigt og websteder overkommelige, selv når du skalerer til millioner af brugere. For det første koster båndbredde penge; dem af os med begrænsede kontrakter ved det alt for godt. Ikke kun gør du ... Læs mere . Det hoved indeholder en manuskript tag - det er her du skriver din kode.

Denne form kan se lidt kedelig ud lige nu, så du kan overveje det læring CSS 5 babytrin til at lære CSS og blive en kick-ass CSS troldmandCSS er de mest vigtige ændringer, som websider har set i det sidste årti, og det banede vejen for adskillelse af stil og indhold. På den moderne måde definerer XHTML den semantiske struktur ... Læs mere at give det lidt mere liv.

JavaScript

Der er flere måder, du kan indsende formularer med JavaScript. Den første og nemmeste måde at gøre det på er gennem Indsend metode:

document.getElementById ( 'minform') indsende ().;

Du kan naturligvis målrette formen med jQuery, hvis du foretrækker det - det gør ingen forskel:

. $ ( '# Minform') indsende ();

Denne kommando fortæller din browser at indsende formularen, nøjagtigt som at trykke på knappen Send. Den er målrettet mod formen ved dens id, og i dette tilfælde er det minform. Dette er ikke AJAX, så det vil indlæse hele siden - noget der ikke altid er ønskeligt.

I metode attribut for din formular, du specificerede, hvordan du skal indsende formularen. Dette kan være STOLPE eller FÅ. Denne attribut bruges ikke, når der indsendes formularer ved hjælp af AJAX, men den samme metode kan bruges.

Meget af det moderne web køres fra GET- eller POST-anmodninger. Generelt bruges GET til at hente data, mens POST bruges til at sende data (og returnere et svar). Data kan sendes med GET, men POST er næsten altid det bedre valg - især til formdata. Du har muligvis set GET-anmodninger før - de sender dataene knyttet til URL'en:

somewebsite.com/index.html? navn = Joe

Spørgsmærket fortæller browseren, at alle data, der følger umiddelbart efter dem, ikke skal bruges til at krydse webstedet, men i stedet skal sendes videre til siden, hvor det kan behandles. Dette fungerer godt til enkle ting som et sidetal, men det har nogle ulemper:

Maksimal tegngrænse: Der er et maksimalt antal tegn, der kan sendes i en url. Du har muligvis ikke nok, hvis du prøver at sende en stor mængde data.
Sigtbarhed: Alle kan se de data, der sendes i en GET-anmodning - det er ikke godt for følsomme data som adgangskoder eller formdata.

POST-anmodninger fungerer på en lignende måde, kun de sender ikke dataene i URL'en. Dette betyder, at en større mængde data kan sendes (data kaldes en nyttelast), og der opnås en vis sikkerhed ved ikke at udsætte dataene. Der er dog stadig let adgang til dataene, så se nærmere på en SSL-certifikat Hvad er et SSL-certifikat, og har du brug for et?Det kan være skræmmende at surfe på internettet, når det drejer sig om personlige oplysninger. Læs mere hvis du ønsker total ro i sindet.

Uanset om POST eller GET bruges, sendes data ind nøgle -> værdi par. I URL'en ovenfor er nøglen navn, og værdien er Joe.

Den bedre måde at indsende formularer er at bruge Asynkron JavaScript og XML (AJAX). JavaScript understøtter AJAX-opkald, men de kan være forvirrende at bruge. JQuery implementerer nøjagtigt de samme metoder, men gør det på en let at bruge måde. Du kan instruere din browser til at udføre en GET- eller POST-anmodning - hold dig til POST for dette eksempel, men GET-anmodninger udføres på en lignende måde.

Her er syntaks:

$. post ('nogle / url', $ ('# myForm'). serialiserer ());

Denne kode gør flere ting. Den første del ($) lader din browser vide, at du vil bruge jQuery til denne opgave. Den anden del kalder stolpe metode fra jQuery. Du skal indtaste to parametre; Den første er url'en, hvor dataene skal sendes, mens den anden er dataene. Du finder muligvis (afhængigt af den URL, du forsøger at få adgang til), at dine browsere ' samme oprindelse sikkerhedspolitik kan forstyrre her. Du kan aktivere deling af ressourcer på tværs af oprindelsen for at komme rundt om dette, men blot at pege på en URL, der er vært på det samme domæne som din side, er ofte nok.

Den anden parameter kalder jQuery føljeton metode på din form. Denne metode får adgang til alle data fra din formular og forbereder dem til transmission - den serialiserer dem.

Denne kode alene er nok til at indsende en formular, men du kan synes, ting fungerer lidt mærkeligt. Det er værd at undersøge dine browserudviklerværktøjer, da disse gør fejlfinding netværk anmodning om en leg.

Alternativt Postbud er et fremragende gratis værktøj til test af HTTP-anmodninger.

Hvis du vil indsende din formular ved hjælp af AJAX, når du indsætter knappen, er det lige så let. Du skal vedhæfte din kode til Indsend begivenhed af formularen. Her er koden:

$ (dokument) .on ('indsende', '# myForm', funktion () {$ .post ('nogle / url', $ ('# myForm'). serialize ()); vende tilbage falsk; });

Denne kode gør flere ting. Når din formular er sendt, kommer din browser og kører din kode først. Din kode sender derefter formdataene vha. AJAX. Det sidste trin, der kræves, er at forhindre, at den originale formular indsendes - du har allerede gjort dette med AJAX, så du ikke ønsker, at det skal ske igen!

Hvis du vil udføre en anden opgave, når AJAX er afsluttet (eller måske endda returnere en statusmeddelelse), skal du bruge en ring tilbage. JQuery gør disse meget nemme at bruge - bare videregive en funktion som en anden parameter som denne:

$ .post ('url', $ ('# myForm'). serialisering (), funktion (resultat) {console.log (resultat); }

Det resultat argument indeholder alle data returneret af den url, som dataene blev sendt til. Du kan nemt svare på disse data:

if (resultat == 'succes') {// udfør en eller anden opgave. } andet {// gøre en anden opgave. }

Det er det for dette indlæg. Forhåbentlig har du nu en solid forståelse af HTTP-anmodninger, og hvordan AJAX fungerer i sammenhæng med en form.

Lærede du nogen nye tricks i dag? Hvordan bruger du AJAX med formularer? Fortæl os dine tanker i kommentarerne nedenfor!

Billedkreditter: vectorfusionart / Shutterstock