Hur man använder AJAX för att skicka ett webbformulär

Annons

Du kanske har läst vår jQuery guide En grundläggande guide till JQuery för Javascript-programmerareOm du är Javascript-programmerare kommer den här guiden till JQuery att hjälpa dig att börja koda som en ninja. Läs mer , liksom del fem av vår jQuery-handledning om AJAX jQuery Tutorial (del 5): AJAX dem alla!När vi nära slutet av vår mini-tutorial-serie för jQuery är det dags att ta en mer djupgående titt på en av de mest använda funktionerna i jQuery. AJAX tillåter en webbplats att kommunicera med ... Läs mer , men idag kommer jag att visa dig hur du använder AJAX för att dynamiskt skicka ett webbformulär. JQuery är överlägset det enklaste sättet att använda AJAX, så kassan vår komma igång självstudier jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir 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 undrar kanske "Varför behöver jag AJAX?" HTML är helt kapabel att skicka 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 stora fördelen som AJAX ger är förmågan att delvis belastning delar av webbsidor. Detta gör att sidor verkar snabbare och mer lyhörda 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 fall av AJAX-användning:

• Sök efter nya e-postmeddelanden regelbundet.
• Uppdatera en live fotbollsscore var 30: e sekund.
• Uppdatera priset för en onlineauktion.

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

HTML

Innan du börjar behöver du ett HTML-formulär. Om du inte vet vad HTML är, läs du vår guide om hur man gör en webbplats för nybörjare Hur man skapar en webbplats: för nybörjareIdag guidar jag dig genom att skapa en komplett webbplats från grunden. Oroa dig inte om det låter svårt. Jag leder dig igenom det varje steg på vägen. Läs mer .

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

 Namn: Ålder: 

Denna html definierar en form med några få element. Lägg märke till hur det finns verkan och metod attribut. Dessa definierar var och hur formuläret ska skickas in. De behövs inte när du använder AJAX, men det är en bra idé att använda dem, eftersom det säkerställer att besökare på din webbplats fortfarande kan använda den om de har JavaScript inaktiverat. Denna sida innehåller jQuery som Google är värd för på deras CDN Vad är CDN och varför lagring är inte längre ett problemCDN: er gör Internet snabbt och webbplatser prisvärda även om du skalar till miljontals användare. För det första kostar bandbredd pengar; de av oss med begränsade kontrakt vet att det är alltför bra. Inte bara gör du ... Läs mer . De huvud innehåller en manus tagg - det är här du skriver din kod.

Den här formen kan se lite tråkig ut just nu, så du kanske vill överväga lära CSS 5 Babysteg för att lära sig CSS och bli en kick-ass CSS trollkarlCSS är de enskilt viktigaste förändringswebbsidor som har sett under det senaste decenniet, och det banade vägen för separationen av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer 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 Skicka in metod:

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

Du kan naturligtvis rikta in formuläret med jQuery om du föredrar - det gör ingen skillnad:

. $ ( '# MyForm) in ();

Detta kommando säger till din webbläsare att skicka formuläret, precis som att trycka på skicka-knappen. Den riktar sig till formen med sin id, och i det här fallet myForm. Detta är inte AJAX, så det kommer att ladda hela sidan - något som inte alltid är önskvärt.

I metod attribut för ditt formulär, du angav hur du skickar in formuläret. Det här kan vara POSTA eller SKAFFA SIG. Detta attribut används inte när du skickar 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 - särskilt för formulärdata. Du kanske har sett GET-förfrågningar tidigare - de skickar data bifogade till URL:

somewebsite.com/index.html? namn = Joe

Frågetecknet berättar för webbläsaren att all information som följer efter den inte ska användas för att korsa webbplatsen utan ska istället föras till sidan för att den ska kunna bearbetas. Detta fungerar bra för enkla saker som ett sidnummer, men det har vissa nackdelar:

Maximal teckengräns: Det finns ett maximalt antal tecken som kan skickas i en url. Du kanske inte har tillräckligt om du försöker skicka en stor mängd data.
Synlighet: Vem som helst kan se informationen som skickas i en GET-begäran - det är inte bra för känslig information som lösenord eller formulärdata.

POST-förfrågningar fungerar på liknande sätt, bara de skickar inte uppgifterna i URL: n. Detta innebär att en större mängd data kan skickas (data kallas en nyttolast), och viss säkerhet uppnås genom att inte exponera uppgifterna. Uppgifterna kan dock fortfarande nås lätt, så titta in i en SSL-certifikat Vad är ett SSL-certifikat och behöver du ett?Att surfa på internet kan vara skrämmande när personlig information är inblandad. Läs mer om du vill ha full sinnesfrid.

Oavsett om POST eller GET används, skickas data in 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 exakt samma metoder, men gör det på ett lättanvänt 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 ('några / url', $ ('# myForm'). serialisera ());

Den här koden 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 ange två parametrar; Den första är url-adressen som ska skickas till, medan den andra är data. Du kan hitta (beroende på webbadressen du försöker komma åt) att dina webbläsare samma ursprung säkerhetspolicy kan störa här. Du kan aktivera korsresursdelning för att komma runt detta, men helt enkelt peka på en URL som är värd på samma domän som din sida räcker ofta.

Den andra parametern kallar jQuery serialisera metod på ditt formulär. Den här metoden får åtkomst till alla uppgifter från ditt formulär och förbereder dem för överföring - det seriellt dem.

Den här koden ensam räcker för att skicka in ett formulär, men du kanske tycker att saker fungerar lite konstigt. Det är väl värt att undersöka dina webbläsarutvecklingsverktyg, eftersom dessa gör att felsökningsnätverket begär en bris.

Alternativt, Brevbärare är ett utmärkt gratisverktyg för att testa HTTP-förfrågningar.

Om du vill skicka in ditt formulär med AJAX när skicka in knappen är det lika enkelt. Du måste bifoga din kod till Skicka in händelse av formuläret. Här är koden:

$ (dokument) .on ('skicka', '# myForm', funktion () {$ .post ('några / url', $ ('# myForm'). serialisera ()); returnera falskt; });

Den här koden gör flera saker. När ditt formulär skickas kommer din webbläsare och kör din kod först. Din kod skickar sedan in formulärdata med AJAX. Det sista steget som krävs är att förhindra att det ursprungliga formuläret skickas in - du har redan gjort det med AJAX, så du vill inte att det ska hända igen!

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

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

De resultat argument innehåller alla data som returnerats av den url som data skickades till. Du kan enkelt svara på dessa data:

if (resultat == 'framgång') {// gör någon uppgift. } annars {// 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 ett formulär.

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

Bildkrediter: vectorfusionart / Shutterstock