Slik bruker du AJAX til å sende en webskjema

Du har kanskje lest vår jQuery-guide En grunnleggende veiledning til JQuery for Javascript-programmerere En grunnleggende veiledning til JQuery for Javascript-programmerere Hvis du er en Javascript-programmerer, vil denne veiledningen til JQuery hjelpe deg med å starte kodingen som en ninja. Les mer, samt del fem av vår jQuery-veiledning om AJAX jQuery-veiledning (del 5): AJAX dem alle! jQuery opplæring (del 5): AJAX dem alle! Når vi er i nærheten av vår jQuery mini-opplæringsserie, er det på tide at vi tok en mer grundig titt på en av de mest brukte funksjonene i jQuery. AJAX tillater et nettsted å kommunisere med ... Les mer, men i dag skal jeg vise deg hvordan du bruker AJAX til å sende et webskjema dynamisk. JQuery er uten tvil den enkleste måten å bruke AJAX på, så sjekk ut vår startveiledning. JQuery Tutorial - Komme i gang: Grunnleggende og Selectors jQuery opplæring - Komme i gang: Grunnleggende og valgorer I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk våre hender skitne med noen kode og lærte hvordan ... Les mer om du er nybegynner. La oss hoppe rett inn.

Hvorfor bruke AJAX

Du lurer kanskje på “Hvorfor trenger jeg AJAX?” HTML er perfekt i stand til å sende inn skjemaer, og gjør det på en ganske smertefri måte. AJAX er implementert i et stort flertall av nettsider, og populariteten fortsetter å stige.

Den store fordelen AJAX bringer, er evnen til delvis lastet deler av nettsider. Dette gjør at sider vises raskere og mer responsive, og sparer båndbredde ved bare å laste inn en liten del data istedenfor hele siden. Her er noen grunnleggende AJAX bruk tilfeller:

• Sjekk etter nye e-postmeldinger regelmessig.
• Oppdater en live fotball score hvert 30. sekund.
• Oppdater prisen for en elektronisk auksjon.

AJAX gir deg utvikleren, med nesten ubegrenset evne til å gjøre nettsider rask, lydhør og snill, noe som de besøkende vil takke for.

HTML-koden

Før du begynner, trenger du et HTML-skjema. Hvis du ikke vet hva HTML er, les så vår guide om hvordan du lager et nettsted for nybegynnere. Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere I dag skal jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer .

Her er HTML-koden du trenger:

       
 Navn:  Alder:   
   

Denne html definerer et skjema med noen få elementer. Legg merke til hvordan det er handling og metode egenskaper. Disse definerer hvor og hvordan skjemaet sendes inn. De er ikke nødvendig når du bruker AJAX, men det er en god ide å bruke dem, da det sikrer at besøkende på nettstedet ditt fortsatt kan bruke det hvis de har JavaScript deaktivert. Denne siden inneholder jQuery hostet av Google på deres CDN Hva CDN er og hvorfor lagring ikke lenger er et problem Hvilke CDN er og hvorfor lagring ikke lenger er Et problem CDNer gjør Internett raskt og nettsteder rimelig når du skalere til millioner av brukere. For det første koster båndbredde penger; de av oss med begrensede kontrakter vet det altfor godt. Ikke bare gjør du ... Les mer. De hode inneholder a manus tag - dette er hvor du vil skrive koden din.

Dette skjemaet kan se litt kjedelig ut akkurat nå, så du vil kanskje vurdere å lære CSS 5 Baby trinn til å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Baby trinn for å lære CSS og bli en Kick-Ass CSS Sorcerer CSS er singelen De viktigste endringswebsidene har sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer for å leve opp det litt.

JavaScript

Det er flere måter du kan sende inn skjemaer med JavaScript. Den første og enkleste måten å gjøre det på er gjennom sende inn metode:

. Document.getElementById ( 'MyForm') sender ();

Du kan selvfølgelig målrette skjemaet med jQuery hvis du foretrekker det - det spiller ingen rolle:

$ ( '# MyForm') sender (.);

Denne kommandoen forteller at nettleseren din skal sende skjemaet, akkurat som å trykke på send-knappen. Den målretter skjemaet med sin id, og i dette tilfellet er det MyForm. Dette er ikke AJAX, så det vil lades opp hele siden - noe som ikke alltid er ønskelig.

I metode Attributt av skjemaet ditt, du angav hvordan du skal sende skjemaet. Dette kan være POST eller FÅ. Dette attributtet brukes ikke når du sender inn skjemaer ved hjelp av AJAX, men samme metode kan brukes.

Mye av den moderne nettsiden er avviklet fra GET eller POST-forespørsler. Generelt sett brukes GET til å hente data, mens POST brukes til å sende data (og returnere et svar). Data kan sendes med GET, men POST er nesten alltid det beste valget - spesielt for skjemadata. Du har kanskje sett GET-forespørsler før - de sender dataene som er vedlagt URL-adressen:

somewebsite.com/index.html?name=Joe

Spørsmålstegnet forteller nettleseren at data som umiddelbart følger den, ikke skal brukes til å krysse nettstedet, men i stedet skal sendes videre til siden for at den skal behandles. Dette fungerer bra for enkle ting som et sidetal, men det har noen ulemper:

Maksimum tegngrense: Det er maksimalt antall tegn som kan sendes i en URL. Du har kanskje ikke nok hvis du prøver å sende en stor mengde data.
Synlighet: Alle kan se at dataene sendes i en GET-forespørsel - det er ikke bra for sensitive data som passord eller skjemadata.

POST-forespørsler fungerer på en lignende måte, bare de sender ikke dataene i nettadressen. Dette betyr at en større mengde data kan sendes (data kalles en nyttelast), og noe sikkerhet er oppnådd ved ikke å utsette dataene. Dataene kan likevel lett nås, skjønt, så se på et SSL-sertifikat. Hva er et SSL-sertifikat, og trenger du en? Hva er et SSL-sertifikat, og trenger du en? Bla gjennom Internett kan være skummelt når personlig informasjon er involvert. Les mer hvis du vil ha total trygghet.

Hvorvidt POST eller GET brukes, blir data sendt inn nøkkel -> verdi par. I nettadressen ovenfor er nøkkelen Navn, og verdien er Joe.

Den bedre måten å sende inn skjemaer er å bruke Asynkron JavaScript og XML (Ajax). JavaScript støtter AJAX-samtaler, men de kan være forvirrende å bruke. JQuery implementerer disse nøyaktig samme metodene, men gjør det på en enkel måte. Du kan instruere nettleseren din til å utføre en GET- eller POST-forespørsel - hold deg til POST for dette eksempelet, men GET-forespørsler utføres på samme måte.

Her er syntaksen:

$ .post ('some / url', $ ('# myForm'). serialize ());

Denne koden gjør flere ting. Den første delen ($) lar nettleseren din vite at du vil bruke jQuery for denne oppgaven. Den andre delen kaller post metode fra jQuery. Du må passere i to parametere; Den første er adressen for å sende dataene til, mens den andre er dataene. Du kan finne (avhengig av nettadressen du prøver å få tilgang til), at nettleserne dine ' samme opprinnelse sikkerhetspolitikken kan forstyrre her. Du kan aktivere ressursdeling for kryssopprinnelse for å komme rundt dette, men bare peke på en nettadresse som er hostet på samme domene som siden din er nok nok til.

Den andre parameteren kalles jQuery serial metode på skjemaet ditt. Denne metoden åpner alle dataene fra skjemaet ditt, og forbereder dem for overføring - det serialiserer dem.

Denne koden alene er nok til å sende inn et skjema, men det kan hende du synes ting virker litt rart. Det er vel verdt å undersøke nettleserutviklerverktøyene dine, ettersom disse gjør debugging-nettverksforespørsler en bris.

Alternativt er Postman et utmerket gratis verktøy for testing av HTTP-forespørsler.

Hvis du vil sende inn skjemaet ditt ved hjelp av AJAX når innleveringsknappen trykkes, er det like enkelt. Du må legge koden til sende inn hendelse av skjemaet. Her er koden:

$ (dokument) .on ('send', '# myForm', funksjon () $ .post ('noen / url', $ ('# myForm'). serialize ()); return false;);

Denne koden gjør flere ting. Når skjemaet ditt er sendt, kommer nettleseren din og kjører koden først. Koden din sender deretter skjemadataene ved hjelp av AJAX. Det endelige trinnet er å forhindre at den opprinnelige skjemaet sendes inn - du har allerede gjort dette med AJAX, så du vil ikke at det skal skje igjen!

Hvis du vil utføre en annen oppgave når AJAX er ferdig (eller kanskje til og med returnere en statusmelding), må du bruke en Ring tilbake. JQuery gjør disse veldig enkle å bruke - bare passere en funksjon som en annen parameter som dette:

$ .post ('url', $ ('# myForm'). serialize (), funksjon (resultat) console.log (result);

De resultat Argumentet inneholder data returnert av den URLen dataene ble sendt til. Du kan enkelt svare på disse dataene:

hvis (resultat == 'suksess') // gjør noe oppgave annet // gjør en annen oppgave 

Det er det for dette innlegget. Forhåpentligvis har du en solid forståelse av HTTP-forespørsler, og hvordan AJAX fungerer i sammenheng med et skjema.

Lærte du noen nye triks i dag? Hvordan bruker du AJAX med skjemaer? Gi oss beskjed om dine tanker i kommentarene nedenfor!

Image Credits: vectorfusionart / Shutterstock

Utforsk mer om: JavaScript, jQuery, Webutvikling.