Programmering

Så här använder du AJAX för att skicka en webbformulär

Så här använder du AJAX för att skicka en webbformulär / Programmering

Du kan ha läst vår jQuery guide En grundläggande guide till JQuery för Javascript-programmerare En grundläggande guide till JQuery för Javascript-programmerare Om du är en Javascript-programmerare, kommer den här guiden till JQuery att hjälpa dig att börja kodning som en ninja. Läs mer, liksom del fem i vår jQuery-handledning om AJAX jQuery-handledning (del 5): AJAX dem alla! jQuery handledning (del 5): AJAX dem alla! När vi nära slutet av vår jQuery mini-tutorial-serie är det dags att vi tog en djupare titt på en av de mest använda funktionerna i jQuery. AJAX låter en webbplats kommunicera med ... Läs mer, men idag visar jag dig hur man använder AJAX för att dynamiskt skicka ett webbformulär. JQuery är överlägset det enklaste sättet att använda AJAX, så kolla in vår startad handledning. JQuery Handledning - Komma igång: Grunder och väljare JQuery Handledning - Komma igång: Grunder och väljare I förra veckan pratade jag om hur viktigt jQuery är för en modern webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer om du är nybörjare. Låt oss hoppa rätt in.

Varför använda AJAX

Du kanske undrar “Varför behöver jag AJAX?” HTML är perfekt för att skicka in formulär, och gör det på ett ganska smärtfritt sätt. AJAX implementeras på en stor majoritet av webbsidor, och dess popularitet fortsätter att öka.

Den enorma fördelen AJAX ger är möjligheten att delvis belastning delar av webbsidor. Detta gör att sidor visas snabbare och mer responsiva och sparar bandbredd genom att bara behöva ladda om en liten del data istället för hela sidan. Här är några grundläggande AJAX användningsfall:

  • Kontrollera regelbundet nya e-postmeddelanden.
  • Uppdatera en live fotbollsspel var 30: e sekund.
  • Uppdatera priset för en online-auktion.

AJAX ger dig, utvecklaren, en nästan obegränsad förmåga att göra webbsidor snabba, lyhörda och snygga - något som dina besökare tackar för.

HTML

Innan du börjar, behöver du en HTML-blankett. Om du inte vet vilken HTML är, läs sedan vår guide om hur man gör en hemsida för nybörjare. Hur man gör en hemsida: För nybörjare Hur man gör en hemsida: För nybörjare idag ska jag styra dig genom processen att göra en komplett webbplats från början. Oroa dig inte om det här låter svårt. Jag leder dig igenom det hela steget. Läs mer .

Här är den HTML du behöver:

       
 Namn:  Ålder:

Den här html definierar en form med några element. Lägg märke till hur det finns verkan och metod attribut. Dessa definierar var och hur formuläret lämnas in. De behövs inte när du använder AJAX, men det är en bra idé att använda dem, eftersom det garanterar att besökare på din webbplats fortfarande kan använda den om de har JavaScript inaktiverat. Den här sidan innehåller jQuery värd av Google på deras CDN Vilka CDN är och varför lagring inte längre är en fråga Vilka CDN är och varför lagring är inte längre Ett problem med CDN-skivor gör Internet snabbt och webbplatser till rimliga priser, även när du ska skala till miljontals användare. För det första kostar bandbredd pengar; de av oss på begränsade kontrakt vet alltför bra. Inte bara gör du ... Läs mer. De huvud innehåller a manus tagg - här skriver du din kod.

Det här formuläret kan se lite tråkigt ut nu, så du kanske vill överväga att lära dig CSS 5 barns steg för att lära CSS och bli en Kick-Ass CSS Sorcerer 5 Baby Steg för att lära CSS och bli en Kick-Ass CSS Sorcerer CSS är singeln De viktigaste förändringswebbsidorna har sett under det senaste decenniet, och det banade vägen för separation av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer för att leva upp det lite.

JavaScript

Det finns flera sätt att skicka formulär med JavaScript. Det första och enklaste sättet att göra det är genom lämna metod:

. Document.getElementById ( 'myForm') skicka ();

Du kan självklart rikta formuläret med jQuery om du föredrar - det spelar ingen roll:

$ (# MyForm) in ().

Det här kommandot berättar att din webbläsare ska skicka in formuläret, precis som att trycka på Skicka-knappen. Det riktar sig till formuläret med dess id, och i det här fallet är det myForm. Det här är inte AJAX, så det kommer att ladda om hela sidan - något som inte alltid är önskvärt.

I metod attribut av din blankett, du angav hur du skickar in formuläret. Det här kan vara POSTA eller SKAFFA SIG. Det här attributet används inte vid inlämning av formulär med AJAX, men samma metod kan användas.

Mycket av den moderna webben körs av GET eller POST-förfrågningar. Generellt sett används GET för att hämta data, medan POST används för att skicka data (och returnera ett svar). Data kan skickas med GET, men POST är nästan alltid det bättre valet - speciellt för formulärdata. Du kan ha sett GET-förfrågningar tidigare - de skickar data som bifogas URL:

somewebsite.com/index.html?name=Joe

Frågetecknet berättar webbläsaren om att data som omedelbart följer den inte ska användas för att korsa webbplatsen, men ska istället vidarebefordras till sidan för att den ska kunna behandlas. Det fungerar bra för enkla saker som ett sidnummer, men det har några nackdelar:

Maximal teckengräns: Det finns ett maximalt antal tecken som kan skickas i en webbadress. Du kanske inte har tillräckligt om du försöker skicka en stor mängd data.
Synlighet: Vem som helst kan se att data skickas i en GET-förfrågan - det är inte bra för känslig data, t.ex. lösenord eller formulärdata.

POST-förfrågningar fungerar på ett liknande sätt, endast de skickar inte data i webbadressen. Det betyder att en större mängd data kan skickas (data kallas a nyttolast), och viss säkerhet uppnås genom att inte exponera data. Uppgifterna kan dock fortfarande enkelt nås, så titta på ett SSL-certifikat. Vad är ett SSL-certifikat och behöver du? Vad är ett SSL-certifikat och behöver du? Att surfa på Internet kan vara skrämmande när personuppgifter är inblandade. Läs mer om du vill ha total sinnesro.

Oavsett om POST eller GET används, skickas data nyckel- -> värde paren. I webbadressen ovan är nyckeln namn, och värdet är Joe.

Det bättre sättet att skicka formulär är att använda Asynkron JavaScript och XML (AJAX). JavaScript stöder AJAX-samtal, men de kan vara förvirrande att använda. JQuery implementerar dessa exakta samma metoder, men gör det på ett enkelt sätt. Du kan instruera din webbläsare att utföra en GET- eller POST-förfrågan - håll dig till POST för detta exempel, men GET-förfrågningar utförs på liknande sätt.

Här är syntaxen:

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

Denna kod gör flera saker. Den första delen ($) låter din webbläsare veta att du vill använda jQuery för den här uppgiften. Den andra delen kallar posta metod från jQuery. Du måste passera i två parametrar; Den första är url för att skicka data till, medan den andra är data. Du kan hitta (beroende på vilken URL du försöker komma åt), att dina webbläsare " samma ursprung säkerhetspolitiken kan störa här. Du kan aktivera resursdelning för korsutgång för att komma runt det här, men bara peka på en webbadress som är värd på samma domän som din sida ofta räcker till.

Den andra parametern kallar jQuery serialisera metod på din blankett. Med denna metod får du alla data från din blankett och förbereder dem för överföring - det serialiserar dem.

Den här koden ensam är tillräcklig för att skicka in en blankett, men det kan hända att saker fungerar lite konstigt. Det är väl värt att undersöka dina verktygen för utvecklare av webbläsare, eftersom dessa gör att felsökningsnätverk begär en bris.

Alternativt är Postman ett utmärkt gratis verktyg för att testa HTTP-förfrågningar.

Om du vill skicka in din blankett med AJAX när inmatningsknappen trycks in, så är det lika enkelt. Du måste bifoga din kod till lämna händelse av formuläret. Här är koden:

$ (dokument) .on ('skicka', '# myForm', funktion () $ .post ('some / url', $ ('# myForm'). serialize ()); return false;);

Denna kod gör flera saker. När din blankett skickas in kommer din webbläsare och kör din kod först. Din kod skickar sedan formulärdata med AJAX. Det slutgiltiga steget krävs för att förhindra att den ursprungliga blanketten skickas in. Du har redan gjort det här med AJAX, så du vill inte att det ska hända igen!

Om du vill utföra någon annan uppgift när AJAX har slutförts (eller kanske till och med returnerar ett statusmeddelande), måste du använda en ring tillbaka. JQuery gör dessa väldigt enkla att använda - bara skicka en funktion som en annan parameter så här:

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

De resultat argument innehåller data som returneras av den webbadress som data skickades till. Du kan enkelt svara på följande data:

om (resultat == 'framgång') // gör något uppdrag annat // gör någon annan uppgift

Det är det för det här inlägget. Förhoppningsvis har du nu en solid förståelse för HTTP-förfrågningar, och hur AJAX fungerar i samband med en blankett.

Lärde du några nya knep idag? Hur använder du AJAX med formulär? Låt oss veta dina tankar i kommentarerna nedan!

Bildkrediter: vectorfusionart / Shutterstock

Utforska mer om: JavaScript, jQuery, webbutveckling.