Guide: Hur man använder AJAX korrekt i WordPress

AJAX är en teknik som du kan använda i Javascript för att hämta data från servern och uppdatera innehållet på din sida utan att ladda om den i din webbläsare. I det här inlägget kommer vi att dyka in i hur man använder AJAX korrekt i WordPress.

De flesta av er är förmodligen bekanta med att utföra AJAX-förfrågningar utanför WordPress och vill undersöka hur man gör det i WordPress. Du kanske undrar över följande frågor:

1. Vilken URL du ska skicka dina AJAX-förfrågningar till i ditt Javascript.
2. Hur man faktiskt fångar AJAX-förfrågan i PHP, hämtar dess data och skickar tillbaka något.
3. Se till att dina AJAX-förfrågningar är säkra.

I WordPress kan du utföra AJAX-förfrågningar i admin och/eller frontend; processen är densamma med några skillnader när det gäller att svara på ovanstående frågor. Låt oss dyka direkt in!

Grunderna för att utföra AJAX-förfrågan i WordPress

Det första du behöver är naturligtvis javascriptet dit du vill skicka AJAX-förfrågan. Det bör ställas i kö genom att använda en giltig metod för att lägga till skript till WordPress, antingen frontend eller backend. Troligtvis har du redan ett skript inställt där du bara behöver delen av att skicka eller begära något från WordPress.

Att lägga upp AJAX i WordPress kräver att du skickar en Javascript-objektvariabel som data till begäran. I objektet måste du tillhandahålla minst en egenskap; ‘ action‘. Värdet på actionegenskapen ‘ ‘ är en sträng som kan vara (nästan) vad du vill. Denna åtgärd är vad som talar om för WordPress hur man dirigerar AJAX-förfrågan. Men det definierar också en del av hook-namnet som du måste haka på i PHP för att hantera AJAX-förfrågan.

När det gäller att svara på fråga 1 ovan: vilken URL ska du skicka din AJAX-förfrågan till? Detta skiljer sig beroende på om ditt skript är köat i admin eller frontend. Eftersom AJAX redan är inbyggt i WordPress administrationsskärmar kan du helt enkelt använda den globala variabeln ajaxurl. Men för frontend-förfrågningar blir det lite mer komplicerat eftersom du måste tillhandahålla AJAX URL manuellt tillsammans med ditt Javascript. Mer om det nedan.

För att hantera AJAX-förfrågningar i PHP kopplar du dig till handlingen wp_ajax_<your action name>. Om du vill köra AJAX-förfrågningar i frontend för icke-inloggade användare kan du också ansluta till wp_ajax_nopriv_<your action name>. Mer om det nedan. Inuti din hooked-funktion kan du komma åt data som skickas från Javascript genom att referera till $_POSTarrayen. För att mata tillbaka något ekar du helt enkelt något. Det är det korta svaret på fråga 2 ovan.

Låt oss dyka rakt in i koden. Vi börjar med hur man lägger till AJAX-förfrågningar i adminpanelen.

Utför AJAX-förfrågningar i WordPress admin

Jag antar att du redan har ett skript i kö som reagerar på någon användaråtgärd, samlar in data och är redo att utföra en AJAX-förfrågan, antingen för att uppdatera något eller för att begära tillbaka lite information från WordPress. Koden nedan är ett mycket förenklat exempel; koden köar en Javascript-fil i tema till admin, och inuti Javascript-koden ställer den in några slumpmässiga variabler, utför AJAX vid sidladdning och matar ut svaret i konsolen.

add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '/assets/js/awhitepixel-ajax.js', ['jquery'], '', true);
});

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_send_something',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(ajaxurl, data, function(response) {
        console.log(response);
    });
});

Som du kan se i Javascript-koden ovan sätter du upp ett Javascript-objekt (tänk på det som en array) med all data du vill skicka vidare, inklusive den viktiga ‘ action‘-egenskapen.

Också som nämnts ovan, eftersom AJAX redan är inbyggt i WordPress administrationsskärmar, använder du helt enkelt den globala variabeln ajaxurlsom AJAX URL.

Nu lägger vi till kod för att acceptera denna AJAX-förfrågan i PHP. Eftersom jag angav ‘ awhitepixel_send_something‘ som värdet av ‘ action‘ måste jag haka på wp_ajax_awhitepixel_send_something.

add_action('wp_ajax_awhitepixel_send_something', function() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
 
    wp_die();
});

Inuti din hooked-funktion har du full tillgång till WordPress; du kan använda alla WordPress-funktioner, frågor och komma åt globala variabler (t.ex. $wpdbför databasfrågor). Alla variabler du skickade i Javascript kommer att vara tillgängliga i $_POSTarray med nycklarna du angav i Javascript-objektet.

Det är valfritt att skicka tillbaka något till Javascript (till exempel när du bara vill skicka en begäran om att uppdatera eller spara något och inte behöver bekräftelse). Om du vill skicka tillbaka något, helt enkelt echodin produktion. För att mata ut mer komplexa variabler än bara en sträng bör du returnera den som en json-kodad array så att Javascript kan läsa och analysera den ordentligt. Något som det här;

En viktig sista anmärkning på sista raden; wp_die(). Alla AJAX-återuppringningsfunktioner bör "stänga tråden" eller avslutas ordentligt genom att göra die()eller exit(). I WordPress använder vi wp_die()för korrekt integration men resultatet är detsamma. Om du råkar få konstig "0" i dina AJAX-svar, beror det mest troligt på att du gjorde det inte wp_die()eller die()… Se alltid till att "du dör" i slutet av alla funktioner kopplade till wp_ajax.

Utföra AJAX-förfrågningar i WordPress-gränssnittet

Processen att utföra AJAX i frontend är densamma som i admin, men något mer komplicerad när det gäller att svara på fråga 1: vilken URL ska AJAX posta till. I exemplet ovan för att utföra AJAX i admin hade vi redan en global Javascript-variabel, ajaxurl, men denna variabel är inte tillgänglig frontend. Vi måste tillhandahålla det själva. För att få värdet av WordPress AJAX URL använder du admin_url('admin-ajax.php')(ja, "admin url" för frontend).

När du ställer i kö för ett frontend-skript som kommer att utföra AJAX-förfrågningar i ditt tema eller plugin, måste du skicka WordPress AJAX URL som variabel till det Javascriptet, genom att använda wp_localize_script().

Nu, i ditt Javascript, har du tillgång till ett globalt Javascript-objekt Theme_Variables(det här namnet kan vara vad du vill), med WordPress’ AJAX URL som värde till ajax_urlegenskapen ‘ ‘. Din AJAX-funktion skulle vara ungefär så här:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

När du hanterar AJAX i frontend finns det ytterligare en sak att tänka på när det gäller kroken du använder för att acceptera AJAX-förfrågningar. Du hakar fortfarande på wp_ajax_<your action name>, men den här kroken fungerar bara för besökare som är inloggade. Om du vill utföra AJAX-förfrågningar för besökare som inte är inloggade måste du (även) haka på wp_ajax_nopriv_<your action name>. Normalt för frontend AJAX-förfrågningar som krävs för att temat ska fungera korrekt skulle du koppla in båda och peka dem båda till samma funktion.

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}

När det gäller innehållet i din AJAX-anslutna funktion är det samma som för adminförfrågningar. Du har fullständig tillgång till WordPress, får tag på överförda variabler från $_POST, returnerar eventuellt något genom att utföra echo, och du bör alltid, alltid komma ihåg att "dö" med wp_die()i slutet.

Säkra dina AJAX-förfrågningar

Eftersom AJAX gör det så enkelt att överföra data mellan skript och backend, bör du definitivt vidta nödvändiga åtgärder för att göra din kod säker. Det inkluderar att sanera all data innan du sparar den, men också att använda WordPresss "nonce"-funktionalitet för att kontrollera om förfrågningarna kommer från aktuella och accepterade platser. Läs WordPress dokumentation på nonce om du inte är bekant med den.

Grundförutsättningen är denna; du använder en WordPress-metod genom att antingen generera ett nonce-värde (wp_create_nonce()) eller skapa ett dolt inmatningsfält med nonce-värdet (wp_nonce_field()). I din AJAX-förfrågan för du vidare nonce-värdet (som kodas av WordPress) i begäran, och i den accepterande delen (wp_ajax_kroken) verifierar du nonce-värdet med det du ursprungligen ställde in.

Låt oss lägga till lite säkerhet till exempelkoden vi gjorde ovan. Först genererar vi en nonce och skickar den i vår wp_localize_scripttillsammans med AJAX URL. Som parameter till wp_create_nonce()ställer vi in ​​någon unik sträng som bara vi borde veta om, så att säga. I exemplet nedan går jag för ‘ awhitepixel-nonce‘.

Det som skickas som ‘ nonce‘ i våra Javascript-variabler till frontend är ett slumpmässigt tal som genereras av WordPress. Ingen utom vi, författare till detta manus, vet att den giltiga nonce är ‘ awhitepixel-nonce‘. I vårt Javascript hämtar vi nonce-värdet och skickar det direkt tillbaka i vår AJAX-förfrågan:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14,
        'nonce': Theme_Variables.nonce
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Och slutligen i vår wp_ajaxhooked funktion bör vi börja med att kontrollera om nonce var giltig med wp_verify_nonce(). Vi tillhandahåller den unika strängen vi ställt in ovan, och om WordPress inte matchar det unika kodade värdet som skickas med denna sträng, avslutar vi omedelbart:

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {
        wp_die(-1);
    }
 
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}