En handledning om att använda AJAX i WordPress

AJAX är en anmärkningsvärd webbteknologi som flyttat oss bortom det enkla “klicka länk, 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 behöver inte laddas. Lyckligtvis är det ganska lätt att använda AJAX från WordPress-miljön, och idag ska jag visa dig hur.

Denna Ajax-handledning borde betraktas som ganska avancerad och fortsätter från och med förra gången då vi lärde oss hur man använder egna databasbord. Arbetar med anpassade databastabeller I WordPress Arbetar med anpassade databastabeller I WordPress En snabbsökning av den bästa av WordPress-pluginsidan kommer att avslöja några av de många unika och nischvägarna som du kan göra din blogg jobb hårdare. Vad händer om du redan har en databas med ... Läs mer från en WordPress-mall - i mitt exempel användes en enkel existerande tabell med kunddata. När det gäller att sätta in saker tillbaka i databasen kommer vi dock att använda sig av en liten AJAX-magi inom WordPress.

All kod i dagens handledning kommer därför att referera till vad vi skrev förra gången, men om du bara letar efter hur man gör AJAX i WordPress så ä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 tas eller fylla resten av formuläret med olika frågor beroende på ett specifikt svar du ger. I grund och botten använder du AJAX när du vill ha en händelse (som en användare som klickar på något eller skriver något) bunden till a serversidan åtgärd som sker i bakgrund.

Vi ska använda den för att lägga till nya poster i vår viktiga kundanpassade databas, men du kan förmodligen 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 en form eller javascript-händelse som skickar data via jQuery AJAX till admin-ajax.php inklusive vilken postdata du vill skicka in. Se till att jQuery laddas.
2. Definiera en funktion i ditt tema function.php; läs in postvariabler, och returnera något tillbaka till användaren om du vill.
3. Lägg till en AJAX action hook för din funktion.

Skapa formuläret

Låt oss börja med att skapa en enkel form på fronten för att skriva in nya kunddetaljer. Det är inget komplicerat, bara ersätt huvuddelen av din anpassade mall med den här koden som vi började förra veckan, runt där kontrollen is_user_logged_in () inträffar:

om (is_user_logged_in ()):?> 
 Namn:  E-post:  Telefon:  Adress:    
 

 
 

Det enda som kan tyckas konstigt för dig är att det finns användning av ett dolt inmatningsfält som heter verkan - Detta innehåller namnet på den funktion som vi utlöser via AJAX.

PHP-mottagaren

Öppna sedan upp functions.php och lägg till följande rad för att säkerställa att jQuery laddas på din webbplats:

wp_enqueue_script ( 'jquery');

Den grundläggande strukturen för att skriva ett AJAX-samtal är som följer:

funktion myFunction () // gör något dö ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

De sista två raderna är åtgärdshooks som berättar WordPress “Jag har en funktion som heter myFunction, och jag vill att du ska lyssna på det eftersom det kommer att ringas via AJAX-gränssnittet” - den första är för administratörsnivå användare, medan wp_ajax_nopriv_ är för användare som inte är inloggade. Här är den fullständiga koden för functions.php att vi ska använda för att infoga data i vårt specialkundstabell, som jag förklarar inom kort:

wp_enqueue_script ( 'jquery'); funktion addCustomer () global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adress = $ _POST ['adress']; om ($ wpdb-> insert ('customers', array ('namn' => $ namn, 'email' => $ email, 'adress' => $ adress, 'telefon' => $ telefon)) === Felaktig) echo "Error";  else echo "Customer" ". $ namn. "" har lagts till, rad ID är ". $ wpdb-> insert_id;  dö ();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // inte riktigt behövs

Precis som tidigare förklarar vi global $ wpdb för att ge oss direkt tillgång till databasen. Vi tar tag på POSTA variabler som innehåller formulärdata. Omgiven i ett IF-uttalande är funktionen $ Wpdb-> Infoga, vilket är vad vi använder för att infoga data i vårt bord. Eftersom WordPress ger specifika funktioner för att infoga vanliga inlägg och metadata, så här $ Wpdb-> Infoga Metoden används i allmänhet endast för anpassade tabeller. Du kan läsa mer om det på Codex, men i princip tar det namnet på bordet som ska införas i, följt av en array av kolumn / värdepar.

De === FALSE kontrollerar för att se om infogningsfunktionen misslyckades och i så fall utmatas den “fel“. Om inte, skickar vi bara ett meddelande till användaren som Kund X tillsattes, och eko på $ Wpdb-> insert_id variabel, vilket indikerar automatisk inkrementvariabel av den sista insatsoperationen som hände (förutsatt att du har satt ett fält som automatiskt inkrementer, som ett ID).

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

Javascript

Det sista steget är den magiska biten - den faktiska Javascript som initierar AJAX-samtalet. Du märker att i det formulär som vi lagt till tidigare var åtgärdsfältet tomt. Det beror på att vi överväger 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-hanterarens fildata: "myDataString", framgång: funktion (resultat) // gör något med returnerade data);

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

I första raden bifogar vi vår ajaxSubmit-funktion i formuläret som vi gjorde tidigare - så när användaren klickar in skickas den via vår speciella AJAX-funktion. Utan detta kommer vår form ingenting att göra. I vår ajaxSubmit () funktion, det första vi gör är att serialisera () formuläret. Detta tar bara alla formvärden, och gör dem till en lång sträng som vårt PHP kommer att analysera senare. Om allt fungerar rätt lägger vi in ​​de återförda data i DIV med återkopplings-ID.

Det är allt. Spara allt, uppdatera och försök att skicka in några formulärdata. Om du har problem kan du se hela koden för sidmallen här (baserat på standard tjugo elva temat), och koden som ska läggas till funktioner.php här (ersätt inte, lägg till det här i slutet).

Saker att tänka på

säkerhet: Denna kod är inte produktionsklar och är endast avsedd att lära sig. Vi har släppt ut en nyckelpunkt, och det är användningen av en wp-nonce - en engångskod som genereras av WordPress som säkerställer att AJAX-förfrågan bara kommer från var den var avsedd. en lösenord om du vill. Utan det 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 rensar alla inmatningar för dig och gör dem säkra.

Uppdatering av kundens tabell: Just nu skickar vi bara tillbaka ett bekräftelsemeddelande, men kundens tabell uppdateras inte. Du får bara se de extra posterna om du uppdaterar sidan (vilken typ av besegrar syftet att göra allt via AJAX). Se om du kan skapa en ny AJAX-funktion som kan mata ut bordet dynamiskt.

Input Validation: Eftersom det inte finns någon validering på formdata, är det faktiskt möjligt att lägga till tomma poster eller flera poster om du trycker på för många gånger. Några inmatningsvalideringar i formulärfälten, rensa dem när de är färdiga, och även SQL för att kontrollera e-post eller telefonnummer som inte existerar i databasen skulle vara användbar.

Det är det från mig den här veckan - om du har haft några problem med att följa den här handledningen, är du välkommen att komma i kontakt med kommentarerna och jag gör mitt bästa för att hjälpa dig. eller om du försöker anpassa det här på något sätt, var god att studsa idéer från mig. Jag hoppas att det här verkligen går att visa hur mycket du kan göra inom WordPress genom att bara kombinera lite JavaScript, PHP och MySQL. Glöm aldrig att kolla in alla våra andra WordPress-artiklar.

Utforska mer om: Programmering, Webmaster Tools, Wordpress.