AJAX gebruiken om een ​​webformulier te verzenden

Je hebt misschien onze jQuery-gids gelezen Een basisgids voor JQuery voor Javascript-programmeurs Een basisgids voor JQuery voor Javascript-programmeurs Als je een Javascript-programmeur bent, helpt deze gids bij JQuery je te beginnen met coderen als een ninja. Lees meer, evenals deel vijf van onze jQuery-zelfstudie over AJAX jQuery Tutorial (Deel 5): AJAX Them All! jQuery-zelfstudie (deel 5): AJAX allemaal! Aan het einde van onze jQuery mini-tutorial-serie wordt het tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. Met AJAX kan een website communiceren met ... Lees meer, maar vandaag zal ik je laten zien hoe je AJAX kunt gebruiken om een ​​webformulier dynamisch te verzenden. JQuery is veruit de gemakkelijkste manier om AJAX te gebruiken, dus bekijk onze starthandleiding. JQuery zelfstudie - Aan de slag: Basics & Selectors jQuery zelfstudie - Aan de slag: Basics & Selectors Vorige week heb ik het gehad over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met wat code en leren hoe ... Lees meer als je een beginner bent. Laten we er meteen in springen.

Waarom AJAX gebruiken

Je vraagt ​​je misschien af “Waarom heb ik AJAX nodig??” HTML is perfect in staat om formulieren in te dienen, en doet dit op een redelijk pijnloze manier. AJAX wordt op een grote meerderheid van webpagina's geïmplementeerd en de populariteit blijft toenemen.

Het enorme voordeel dat AJAX met zich meebrengt, is de mogelijkheid om gedeeltelijk laden delen van webpagina's. Dit zorgt ervoor dat pagina's sneller en sneller reageren en bespaart bandbreedte door slechts een klein deel van de gegevens opnieuw te laden in plaats van de hele pagina. Hier zijn enkele standaard AJAX-gebruikscasussen:

• Controleer regelmatig op nieuwe e-mails.
• Update elke 30 seconden een live voetbalscore.
• Update de prijs voor een online veiling.

AJAX biedt u, de ontwikkelaar, een bijna onbeperkte mogelijkheid om webpagina's snel, responsief en pittig te maken - iets dat uw bezoekers u zullen bedanken voor.

De HTML

Voordat u aan de slag gaat, heeft u een HTML-formulier nodig. Als u niet weet wat HTML is, lees dan onze gids over hoe u een website voor beginners kunt maken. Hoe u een website kunt maken: voor beginners Hoe u een website kunt maken: voor beginners Vandaag begeleid ik u door het proces van het maken van een website. een compleet nieuwe website. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden. Lees verder .

Hier is de HTML die je nodig hebt:

       
 Naam:  Leeftijd:   
   

Deze html definieert een formulier met een paar elementen. Merk op hoe er zijn actie en methode attributen. Deze bepalen waar en hoe het formulier wordt ingediend. Ze zijn niet nodig wanneer u AJAX gebruikt, maar het is een goed idee om ze te gebruiken, omdat het ervoor zorgt dat bezoekers van uw website het nog steeds kunnen gebruiken als JavaScript is uitgeschakeld. Deze pagina bevat jQuery gehost door Google op hun CDN Welke CDN's zijn en waarom opslag niet langer een probleem is Wat CDN's zijn en waarom opslag niet langer een probleem is CDN's maken het internet snel en websites betaalbaar, zelfs wanneer u opschaalt naar miljoenen gebruikers. Ten eerste kost bandbreedte geld; die van ons met beperkte contracten weten dat maar al te goed. Niet alleen jij ... Lees meer. De hoofd bevat een script tag - hier kunt u uw code schrijven.

Dit formulier ziet er op dit moment misschien wat saai uit, dus je kunt overwegen om CSS 5 Baby Steps te leren om CSS te leren en een Kick-Ass te worden CSS Sorcerer 5 Baby Stappen om CSS te leren en een Kick-Ass te worden CSS Sorcerer CSS is de single de belangrijkste veranderingswebpagina's van het afgelopen decennium hebben de weg geëffend voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees meer om het een beetje op te fleuren.

JavaScript

Er zijn verschillende manieren om formulieren in te dienen met JavaScript. De eerste en eenvoudigste manier om dit te doen is via de voorleggen methode:

. Document.getElementById ( 'mijnForm') submit ();

U kunt het formulier uiteraard targeten met jQuery als u dat wilt - het maakt geen verschil:

$ ( '# MijnForm') kenbaar te maken (.);

Deze opdracht vertelt uw browser om het formulier in te dienen, precies zoals op de knop Verzenden drukken. Het richt de vorm op zijn id, en in dit geval is dat mijnForm. Dit is geen AJAX, dus zal het de hele pagina opnieuw laden - iets dat niet altijd wenselijk is.

In de methode attribuut van uw formulier, hebt u opgegeven hoe u het formulier moet verzenden. Dit kan zijn POST of KRIJGEN. Dit kenmerk wordt niet gebruikt bij het indienen van formulieren met AJAX, maar dezelfde methode kan ook worden gebruikt.

Veel van het moderne internet loopt van GET- of POST-verzoeken. Over het algemeen wordt GET gebruikt om gegevens op te halen, terwijl POST wordt gebruikt om gegevens te verzenden (en een antwoord terug te sturen). Gegevens kunnen met GET worden verzonden, maar POST is bijna altijd de betere keuze, met name voor formuliergegevens. Misschien heb je eerder GET-aanvragen gezien - ze sturen de gegevens die aan de URL zijn gekoppeld:

somewebsite.com/index.html?name=Joe

Het vraagteken vertelt de browser dat alle daaropvolgende gegevens niet worden gebruikt om de website te doorkruisen, maar in plaats daarvan worden doorgegeven aan de pagina die moet worden verwerkt. Dit werkt goed voor eenvoudige dingen zoals een paginanummer, maar het heeft enkele nadelen:

Maximale tekenlimiet: Er is een maximum aantal tekens dat in een URL kan worden verzonden. U heeft misschien niet genoeg als u een grote hoeveelheid gegevens probeert te verzenden.
Zichtbaarheid: Iedereen kan zien dat de gegevens worden verzonden in een GET-aanvraag - het is niet goed voor gevoelige gegevens zoals wachtwoorden of formuliergegevens.

POST-aanvragen werken op dezelfde manier, alleen verzenden ze de gegevens niet in de URL. Dit betekent dat een grotere hoeveelheid gegevens kan worden verzonden (gegevens staan ​​bekend als a payload), en er wordt enige beveiliging verkregen door de gegevens niet te ontmaskeren. De gegevens zijn echter nog steeds gemakkelijk toegankelijk, dus kijk in een SSL-certificaat Wat is een SSL-certificaat en heeft u er een nodig? Wat is een SSL-certificaat en heeft u er een nodig? Surfen op het internet kan eng zijn als het om persoonlijke gegevens gaat. Lees meer als u volledige gemoedsrust wilt.

Of POST of GET wordt gebruikt, gegevens worden verzonden sleutel -> waarde paren. In de bovenstaande URL is de sleutel naam, en de waarde is Joe.

De betere manier om formulieren in te dienen is om te gebruiken Asynchrone JavaScript en XML (AJAX). JavaScript ondersteunt AJAX-aanroepen, maar ze kunnen verwarrend zijn om te gebruiken. JQuery implementeert exact dezelfde methoden, maar doet dit op een eenvoudig te gebruiken manier. U kunt uw browser opdracht geven om een ​​GET- of POST-aanvraag uit te voeren - blijf bij POST voor dit voorbeeld, maar GET-verzoeken worden op dezelfde manier uitgevoerd.

Dit is de syntaxis:

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

Deze code doet verschillende dingen. Het eerste deel ($) laat uw browser weten dat u jQuery voor deze taak wilt gebruiken. Het tweede deel noemt het post methode van jQuery. Je moet twee parameters doorgeven; De eerste is de URL waarnaar de gegevens moeten worden verzonden, de tweede is de gegevens. Mogelijk vindt u (afhankelijk van de URL die u probeert te openen) dat de browsers Dezelfde oorsprong beveiligingsbeleid kan hier interfereren. U kunt het delen van bronnen van bronnen inschakelen om dit probleem te omzeilen, maar gewoon verwijzen naar een URL die wordt gehost op hetzelfde domein als uw pagina, is vaak genoeg.

De tweede parameter roept de jQuery aan serialize methode op uw formulier. Deze methode benadert alle gegevens van uw formulier en bereidt ze voor op overdracht - het serialiseert ze.

Deze code alleen is voldoende om een ​​formulier in te dienen, maar misschien vind je dingen een beetje vreemd. Het is de moeite waard om uw browserontwikkelaarstools te onderzoeken, omdat deze het aanvragen van foutopsporingsnetwerken een fluitje van een cent maken.

Als alternatief is Postman een uitstekende gratis tool voor het testen van HTTP-verzoeken.

Als u uw formulier wilt verzenden met AJAX wanneer op de knop Verzenden wordt gedrukt, is dat net zo eenvoudig. U moet uw code bijvoegen bij de voorleggen gebeurtenis van het formulier. Hier is de code:

$ (document) .on ('submit', '# myForm', function () $ .post ('some / url', $ ('# myForm'). serialize ()); return false;);

Deze code doet verschillende dingen. Wanneer uw formulier is verzonden, wordt uw browser weergegeven en wordt uw code eerst uitgevoerd. Uw code verzendt vervolgens de formuliergegevens met behulp van AJAX. De laatste vereiste stap is om te voorkomen dat de originele vorm wordt ingediend - je hebt dit al gedaan met AJAX, dus je wilt niet dat het opnieuw gebeurt!

Als u een andere taak wilt uitvoeren nadat de AJAX is voltooid (of misschien zelfs een statusbericht terugstuurt), moet u een Bel terug. JQuery maakt deze zeer eenvoudig te gebruiken - geef eenvoudig een functie door als een andere parameter zoals deze:

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

De resultaat argument bevat alle gegevens die worden geretourneerd door de URL waarnaar de gegevens zijn verzonden. U kunt eenvoudig reageren op deze gegevens:

if (result == 'success') // een taak uitvoeren anders // een andere taak uitvoeren 

Dat is het voor deze post. Hopelijk heb je nu een goed begrip van HTTP-verzoeken en hoe AJAX werkt in de context van een formulier.

Heb je vandaag nieuwe trucs geleerd? Hoe gebruik je AJAX met formulieren? Laat ons je mening weten in de reacties hieronder!

Afbeelding Credits: vectorfusionart / Shutterstock

Ontdek meer over: JavaScript, jQuery, Web Development.