En handledning om hur du använder AJAX i WordPress

Annons

AJAX är en anmärkningsvärd webbteknologi som flyttade oss bortom den enkla "klicka på länken, gå till en annan sida" strukturen av Internet 1.0.

AJAX, som står för Asynkron Javascript och XML, gör det möjligt för webbplatser att dynamiskt hämta och visa innehåll utan att användaren flyttar bort från den aktuella sidan. Detta leder till en mycket mer interaktiv användarupplevelse och kan påskynda saker också eftersom en helt ny webbsida inte behöver laddas. Lyckligtvis är det ganska enkelt att använda AJAX inom WordPress-miljön, och idag ska jag visa dig hur.

Denna Ajax-tutorial bör betraktas som ganska avancerad och fortsätter från förra gången vi lärde oss hur man använder anpassade databastabeller Arbeta med anpassade databas tabeller i WordPressEn snabb skanning av sidan Best of WordPress Plugins kommer att avslöja några av de många unika och nischade sätten du kan få din blogg att arbeta hårdare. Tänk om du redan har en databas med ... Läs mer från en WordPress-mall - i mitt exempel användes en enkel befintlig tabell med kunddata. När det gäller att sätta tillbaka saker i databasen men vi kommer att använda lite AJAX-magi inom WordPress.

All kod i dagens tutorial kommer därför att hänvisa till det vi skrev förra gången, men om du bara letar efter hur du gör AJAX i WordPress är det lika relevant.

Varför använda AJAX?

Den vanligaste användningen av AJAX är relaterad till formulär - kontrollera om ett användarnamn har tagits, eller fyll i resten av formuläret med olika frågor beroende på ett visst svar du ger. I grund och botten använder du AJAX när du vill ha ett evenemang (som att en användare klickar på något eller skriver något) bunden till en serversidan handling som inträffar i bakgrund.

Vi kommer att använda den för att lägga till nya poster till vår viktiga kundanpassade kunddatabasstabell, men du kan antagligen komma med något mer spännande.

Översikt över hur man använder AJAX i WordPress

1. Redigera din anpassade mall för att inkludera ett formulär eller javascript-händelse som skickar data via jQuery AJAX till admin-ajax.php inklusive vad postuppgifter du vill skicka in. Se till att jQuery laddas.
2. Definiera en funktion i ditt tema function.php; läs inläggsvariabler och returnera något tillbaka till användaren om du vill.
3. Lägg till en AJAX actionkrok för din funktion.

Skapa formuläret

Låt oss börja med att skapa ett enkelt formulär i front-enden för att ange nya kundinformation. Det är inget komplicerat, ersätt bara huvuddelen av din anpassade mall med den här koden som vi började förra veckan, där is_user_logged_in () -kontrollen inträffar:

if (is_user_logged_in ()):?> 

Namn:E-post:Telefon:Adress:

Det enda som kan se konstigt ut för dig är att det finns ett doldt inmatningsfält som heter verkan - detta innehåller namnet på funktionen vi kommer att utlösa via AJAX.

PHP-mottagaren

Nästa, öppna upp functions.php och lägg till följande rad för att se till att jQuery laddas på din webbplats:

wp_enqueue_script ( 'jquery');

Grundstrukturen för att skriva ett AJAX-samtal är följande:

funktion myFunction () { //göra någonting. dö(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

De två sista raderna är actionkrokar som berättar WordPress "Jag har en funktion som heter myFunction, och jag vill att du lyssnar på den för den kommer att kallas via AJAX-gränssnittet" - den första är för användare på administratörsnivå wp_ajax_nopriv_ är för användare som inte är inloggade. Här är den fullständiga koden för functions.php som vi kommer att använda för att infoga data i vår speciella kundtabell, som jag kommer att förklara inom kort:

wp_enqueue_script ( 'jquery'); funktion addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adress = $ _POST ['adress']; if ($ wpdb-> Infoga (kunder ", array ( 'name' => $ name, 'email' => $ e-post, 'address' => $ -adress, 'phone' => $ -telefon. )) FALSE) {echo "Error"; } annars { echo "Kund". $ namn. "har lagts fram, rad-ID är". $ wpdb-> insert_id; } dö(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // behövs inte riktigt

Precis som tidigare förklarar vi global $ wpdb för att ge oss direkt tillgång till databasen. Vi tar då tag i POSTA variabler som innehåller formulärdata. Funktionen är omgiven av ett IF-uttalande $ Wpdb-> Infoga, vilket är vad vi använder för att infoga data i vår tabell. Eftersom WordPress tillhandahåller specifika funktioner för att infoga vanliga inlägg och metadata, är detta $ Wpdb-> Infoga metoden används vanligtvis endast för anpassade tabeller. Du kan läs mer om det på Codex, men i princip tar det namnet på tabellen som ska infogas, följt av en array av kolumn / värdepar.

De FALSK kontrollerar om infogningsfunktionen misslyckades, och i så fall matar den ut "fel“. Om inte, skickar vi bara ett meddelande till användaren om det Kund X lades till, och ekar om $ Wpdb-> insert_id variabel, som indikerar automatisk ökningsvariabel av den senaste insatsoperationen som hände (förutsatt att du har ställt in ett fält som automatiskt ökar, som ett ID).

Till sist, dö() kommer att åsidosätta standarden dö (0) tillhandahålls av WordPress - detta är inte nödvändigt som sådant, men utan det kommer du att få 0 bifogade i slutet av allt du skickar tillbaka till mallen.

Javascript

Det sista steget är den magiska biten - själva Javascript som kommer att initiera AJAX-samtalet. Du kommer att märka att åtgärdsfältet i det formulär vi lagt till tidigare lämnades tomt. Det beror på att vi kommer att åsidosätta detta med vårt AJAX-samtal. Det allmänna sättet att göra detta skulle vara:

jQuery.ajax ({typ: "POST", url: "/wp-admin/admin-ajax.php", // vår PHP-hanterares filinformation: "myDataString", framgång: funktion (resultat) {// gör något med returnerade data})};

Det är den grundläggande strukturen för AJAX-samtal som vi kommer att använda, men verkligen inte det enda sättet du kan göra det. Du undrar kanske varför vi hänvisar till wp-admin här, även om detta kommer att vara i framsidan av webbplatsen. Det är just här AJAX-hanterare är bosatt, oavsett om du använder den för front- eller administrationssidefunktioner - förvirrande, jag vet. Klistra in följande kod direkt i kundmallen:

I den första raden kopplar vi vår ajaxSubmit-funktion till det formulär vi skapade tidigare - så när användaren klickar in skickar den via vår speciella AJAX-funktion. Utan detta kommer vår form inte att göra någonting. I vår ajaxSubmit () funktion, det första vi gör är att serialisera () formen. Detta tar bara alla formvärden och förvandlar dem till en lång sträng som vår PHP kommer att analysera senare. Om det fungerar som det ska kommer vi att lägga in de returnerade uppgifterna i DIV med id för feedback.

Det är allt. Spara allt, uppdatera och försök skicka in formdata. Om du har problem kan du se hela koden för sidmallen här (baserat på standardtemaet för tjugo elva), och koden att lägga till i features.php här(ersätt inte, bara lägg till detta i slutet).

Saker att tänka på

säkerhet: Den här koden är inte produktionsklar och är endast avsedd för lärande. Vi har utelämnat en nyckelpunkt, och det är användningen av en wp-nonce - en engångskod genererad av WordPress som säkerställer att AJAX-begäran endast kommer från den var den var avsedd; en lösenord om du vill. Utan detta kan din funktion effektivt utnyttjas för att infoga slumpmässiga data. SQL-injektionsattacker är dock inte ett problem eftersom vi dirigerade frågor via WordPress $ Wpdb-> Infoga funktion - WordPress rengör alla ingångar för dig och gör dem säkra.

Uppdatering av kundtabellen: Just nu skickar vi bara ett bekräftelsemeddelande, men kundtabellen uppdateras inte - du ser bara de ytterligare posterna om du uppdaterar sidan (vilken typ av besegra syftet med att göra allt via AJAX). Se om du kan skapa en ny AJAX-funktion som dynamiskt kan mata ut tabellen.

Ingångsvalidering: eftersom det inte finns någon validering med formulärdata är det faktiskt möjligt att lägga till tomma poster eller flera poster om du trycker för många gånger. Vissa inmatningsvalideringar i formulärfältet, rensning av dem när de är slutförda samt SQL för att kontrollera e-postmeddelandet eller telefonnumret som inte redan finns i databasen skulle vara användbart.

Det är det från mig den här veckan - om du har haft problem med att följa den här tutorialen är du välkommen att komma i kontakt via kommentarerna och jag ska göra mitt bästa för att hjälpa dig; eller om du försöker anpassa detta på något sätt, känn dig fri att studsa idéer från mig. Jag hoppas att detta verkligen visar hur mycket du kan göra från WordPress helt enkelt genom att kombinera lite JavaScript, PHP och MySQL. Glöm inte som alltid att kolla in alla våra andra WordPress-artiklar.