Slik bruker du AJAX til å sende et webskjema

Annonse

Du har kanskje lest vår jQuery guide En grunnleggende guide til JQuery for Javascript-programmerereHvis du er en Javascript-programmerer, vil denne guiden til JQuery hjelpe deg med å starte koding som en ninja. Les mer , så vel som del fem av vår jQuery tutorial på AJAX jQuery Tutorial (Del 5): AJAX dem alle!Da vi nærme slutten av min-tutorial-serien for jQuery, er det på tide at vi tar en mer grundig titt på en av de mest brukte funksjonene i jQuery. AJAX lar et nettsted kommunisere med ... Les mer , men i dag skal jeg vise deg hvordan du bruker AJAX til å sende et webskjema dynamisk. JQuery er den klart enkleste måten å bruke AJAX på, så sjekk ut vårt komme i gang tutorial jQuery Tutorial - Komme i gang: Grunnleggende og velgereForrige uke snakket jeg om hvor viktig jQuery er for enhver moderne nettutvikler, og hvorfor det er kjempebra. Denne uken tror jeg det er på tide at vi skitne hendene med litt kode og lærte hvordan ... Les mer hvis du er en 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 implementeres på et stort flertall av nettsidene, og populariteten fortsetter å øke.

Den store fordelen AJAX gir er muligheten til delvis belastning deler av nettsider. Dette får sider til å vises raskere og mer responsive, og sparer båndbredde ved å bare måtte laste inn en liten del av data i stedet for hele siden. Her er noen grunnleggende AJAX-brukssaker:

• Se etter nye e-poster regelmessig.
• Oppdater en live fotballscore hvert 30. sekund.
• Oppdater prisen for en online auksjon.

AJAX gir deg, utvikleren, en nesten ubegrenset mulighet til å lage nettsider raske, responsive og snappy - noe de besøkende vil takke deg for.

HTML

Før du kommer i gang, trenger du et HTML-skjema. Hvis du ikke vet hva HTML er, kan du lese guiden vår på hvordan lage et nettsted for nybegynnere Hvordan lage et nettsted: For nybegynnereI dag vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke bekymre deg hvis dette høres vanskelig ut. Jeg vil guide deg gjennom det hvert trinn på veien. Les mer .

Her er HTML-en du trenger:

 Navn: Alder: 

Denne html definerer en form med noen få elementer. Legg merke til hvordan det er handling og metode egenskaper. Disse definerer hvor og hvordan skjemaet skal sendes inn. De er ikke nødvendige når du bruker AJAX, men det er en god idé å bruke dem, ettersom det sikrer at besøkende på nettstedet ditt fremdeles kan bruke det hvis de har JavaScript deaktivert. Denne siden inkluderer jQuery som er hostet av Google på deres CDN Hva CDN-er er og hvorfor lagring ikke lenger er et problemCDN-er gjør Internett raskt og nettsteder rimelige, selv når du skalerer til millioner av brukere. For det første koster båndbredde penger; de av oss på begrensede kontrakter vet at alt for godt. Ikke bare gjør du ... Les mer . De hode inneholder en manus tag - det er her du vil skrive koden.

Dette skjemaet kan se litt kjedelig ut akkurat nå, så det kan være lurt å vurdere lære CSS 5 Babytrinn for å lære CSS og bli en Kick-Ass CSS trollmannCSS er de viktigste endringssidene som har sett det siste tiåret, og det banet vei for atskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer å livliggjøre 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 gjør ingen forskjell:

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

Denne kommandoen forteller nettleseren din om å sende inn skjemaet, akkurat som å trykke på send-knappen. Den retter seg mot formen etter ID-en, og i dette tilfellet MyForm. Dette er ikke AJAX, så det vil laste inn hele siden - noe som ikke alltid er ønskelig.

I metode attributtet til skjemaet ditt, spesifiserte du hvordan du skal sende inn skjemaet. Dette kan være POST eller FÅ. Denne attributtet brukes ikke når du sender inn skjemaer som bruker AJAX, men den samme metoden kan brukes.

Mye av det moderne nettet kjøres av 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 bedre valget - spesielt for skjemadata. Du har kanskje sett GET-forespørsler før - de sender dataene som er knyttet til URLen:

somewebsite.com/index.html? Name = Joe

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

Maksimal karaktergrense: Det er et maksimalt antall tegn som kan sendes i en url. Det er ikke sikkert du har nok hvis du prøver å sende en stor mengde data.
Synlighet: Alle kan se dataene som sendes i en GET-forespørsel - det er ikke bra for sensitive data som passord eller skjemadata.

POST-forespørsler fungerer på samme måte, bare de sender ikke dataene i URL-en. Dette betyr at en større mengde data kan sendes (data er kjent som en nyttelast), og en viss sikkerhet oppnås ved ikke å eksponere dataene. Det er fremdeles lett tilgang til dataene, så se på en SSL-sertifikat Hva er et SSL-sertifikat, og trenger du et?Å surfe på Internett kan være skummelt når personlig informasjon er involvert. Les mer hvis du vil ha total ro.

Enten POST eller GET brukes, blir data sendt inn nøkkel -> verdi par. I nettadressen over 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 nøyaktig de samme metodene, men gjør det på en brukervennlig måte. Du kan instruere nettleseren din om å utføre en GET- eller POST-forespørsel - hold deg til POST for dette eksempelet, men GET-forespørsler blir utført på lignende måte.

Her er syntaks:

$ .post ('noen / url', $ ('# myForm'). serialisere ());

Denne koden gjør flere ting. Den første delen ($) lar nettleseren din vite at du vil bruke jQuery til denne oppgaven. Den andre delen kaller post metode fra jQuery. Du må passere inn to parametere; Den første er url-en du vil sende dataene til, mens den andre er dataene. Du kan finne ut (avhengig av nettadressen du prøver å få tilgang til) at nettleserne dine samme opprinnelse sikkerhetspolitikk kan forstyrre her. Du kan aktivere deling av ressursene på tvers av opprinnelser for å komme rundt dette, men ganske enkelt å peke på en URL som er vert på samme domene som siden din, er ofte nok.

Den andre parameteren kaller jQuery serialize metoden på skjemaet ditt. Denne metoden får tilgang til alle dataene fra skjemaet ditt, og forbereder dem for overføring - den serialiserer dem.

Denne koden alene er nok til å sende inn et skjema, men du kan synes at ting fungerer litt rart. Det er vel verdt å undersøke nettleserutviklerverktøyene dine, ettersom disse gjør feilsøkingsnettverket til en lek.

Alternativt, Postbud er et utmerket gratis verktøy for å teste HTTP-forespørsler.

Hvis du vil sende inn skjemaet ditt ved å bruke AJAX når du sender inn knappen, er det like enkelt. Du må knytte koden din til sende inn hendelse av skjemaet. Her er koden:

$ (dokument) .on ('sende', '# myForm', funksjon () {$ .post ('noen / url', $ ('# myForm'). serialisere ()); return falsk; });

Denne koden gjør flere ting. Når skjemaet ditt er sendt, kommer nettleseren din og kjører koden din først. Koden din sender deretter skjemadataene ved å bruke AJAX. Det siste trinnet som kreves er å forhindre at det originale 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 pass en funksjon som en annen parameter som denne:

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

De resultat -argumentet inneholder data som er returnert av url-en dataene ble sendt til. Du kan enkelt svare på disse dataene:

if (resultat == 'suksess') {// gjøre noen oppgaver. } ellers {// gjør noen andre oppgaver. }

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

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

Bildekreditter: vectorfusionart / Shutterstock