Juhend: kuidas WordPressis AJAX-i õigesti kasutada

AJAX on tehnika, mida saate Javascriptis kasutada serverist andmete toomiseks ja lehe sisu värskendamiseks ilma seda brauseris uuesti laadimata. Selles postituses käsitleme seda, kuidas AJAX-i WordPressis õigesti kasutada.

Tõenäoliselt tunnevad enamik teist AJAX-i päringute esitamist väljaspool WordPressi ja soovivad uurida, kuidas seda WordPressis teha. Teid võivad huvitada järgmised küsimused:

1. Millisele URL-ile peaksite oma Javascripti AJAX-i päringud saatma.
2. Kuidas PHP-s AJAX-i päring tegelikult kinni püüda, selle andmed tuua ja midagi tagasi saata.
3. Veenduge, et teie AJAX-i päringud on turvalised.

WordPressis saate teha AJAX-i päringuid administraatoris ja/või kasutajaliideses; protsess on sama, kuid ülaltoodud küsimustele vastamisel on mõned erinevused. Sukeldume otse sisse!

AJAX-i päringu täitmise põhitõed WordPressis

Esimene asi, mida vajate, on ilmselgelt javascript, kuhu soovite AJAX-i päringu saata. See tuleks järjekorda panna, kasutades kehtivat WordPressi skriptide lisamise meetodit, kas esi- või taustaprogrammi. Tõenäoliselt on teil juba seadistatud skript, kus vajate lihtsalt WordPressilt millegi saatmist või taotlemist.

AJAX-i postitamiseks WordPressis peate päringule andmetena edastama Javascripti objektimuutuja. Objektil tuleb esitada vähemalt üks vara; ‘ action‘. Atribuudi „ " väärtus actionon string, mis võib olla (peaaegu) ükskõik, mida soovite. See toiming ütleb WordPressile, kuidas AJAX-i päring suunata. Kuid see määrab ka osa konksu nimest, mille peate PHP-s AJAX-i päringu käsitlemiseks ühendama.

Kui on vaja vastata ülaltoodud küsimusele 1: millisele URL-ile peaksite oma AJAX-i päringu saatma? See erineb olenevalt sellest, kas teie skript on järjekorda pandud administraatori- või kasutajaliidesesse. Kuna AJAX on juba WordPressi halduskuvadesse sisse ehitatud, saate lihtsalt kasutada globaalset muutujat ajaxurl. Kuid kasutajaliidese päringute puhul muutub see pisut keerulisemaks, kuna peate koos Javascriptiga käsitsi sisestama AJAX-i URL-i. Sellest lähemalt allpool.

AJAX-i päringute käsitlemiseks PHP-s ühendate toiminguga wp_ajax_<your action name>. Kui soovite käivitada AJAX-i päringuid kasutajaliideses sisselogimata kasutajatele, võite ka haakida wp_ajax_nopriv_<your action name>. Sellest lähemalt allpool. Haagitud funktsiooni sees pääsete juurde Javascriptist edastatud andmetele, viidates $_POSTmassiivile. Midagi tagasi väljastamiseks lihtsalt kordate midagi. See on lühike vastus ülaltoodud küsimusele 2.

Sukeldume otse koodi. Alustame sellest, kuidas administraatoripaneelil AJAX-i taotlusi lisada.

AJAX-i päringute täitmine WordPressi administraatoris

Oletan, et teil on juba järjekorda pandud skript, mis reageerib mõnele kasutaja toimingule, kogub andmeid ja on valmis täitma AJAX-i päringu, kas siis millegi värskendamiseks või WordPressilt mõne teabe tagasi nõudmiseks. Allolev kood on väga lihtsustatud näide; kood seab teemas Javascripti faili administraatorile järjekorda ja Javascripti koodi sees seadistab mõned juhuslikud muutujad, teostab lehe laadimisel AJAX-i ja väljastab vastuse konsoolis.

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);
    });
});

Nagu näete ülaltoodud Javascripti koodist, seadistate Javascripti objekti (mõelge sellele kui massiivile) kõigi andmetega, mida soovite edastada, sealhulgas olulise actionatribuudiga " ".

Nagu eespool mainitud, kuna AJAX on juba WordPressi haldusekraanidesse sisse ehitatud, kasutate ajaxurlAJAX-i URL-ina lihtsalt globaalset muutujat.

Nüüd lisame koodi selle AJAX-i päringu vastuvõtmiseks PHP-s. Kuna ma andsin " awhitepixel_send_something" väärtuseks action, pean haakima 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();
});

Oma konksu funktsiooni sees on teil täielik juurdepääs WordPressile; saate kasutada mis tahes WordPressi funktsioone, päringuid ja juurdepääsu globaalsetele muutujatele (nt $wpdbandmebaasipäringute jaoks). Kõik Javascriptis edastatud muutujad on $_POSTmassiivi sees saadaval Javascripti objektis sisestatud võtmetega.

Javascriptile ei ole kohustuslik midagi tagasi saata (näiteks kui soovite saata ainult taotluse millegi värskendamiseks või salvestamiseks ega vaja kinnitust). Kui soovite midagi tagasi anda, siis lihtsalt echooma väljund. Keerulisemate muutujate väljastamiseks kui lihtsalt string, peaksite selle tagastama json-kodeeringuga massiivina, et Javascript saaks seda õigesti lugeda ja sõeluda. Midagi sellist;

Üks oluline lõpumärkus viimasel real; wp_die(). Kõik AJAX-i tagasihelistamise funktsioonid peaksid "lõime sulgema" või lõpetama õigesti, tehes die()või exit(). WordPressis kasutame wp_die()õigeks integreerimiseks, kuid tulemus on sama. Kui teie AJAX-i vastustesse juhtub veider "0", on tõenäoliselt põhjuseks ei teinud wp_die()või die(). Alati, alati veenduge, et "sa surete" kõigi funktsioonide lõpus, mis on ühendatud wp_ajax.

AJAX-i päringute täitmine WordPressi kasutajaliideses

AJAXi esitusprotsess on sama, mis administraatoris, kuid küsimusele 1 vastamisel on mõnevõrra keerulisem: millisele URL-ile peaks AJAX postitama. Ülaltoodud näites AJAX-i täitmiseks administraatoris oli meil juba globaalne Javascripti muutuja ajaxurl, kuid see muutuja pole kasutajaliideses saadaval. Peame selle ise pakkuma. Kasutatava WordPressi AJAX-i URL-i väärtuse hankimiseks admin_url('admin-ajax.php')(jah, kasutajaliidese jaoks „admin url”).

Kui asetate järjekorda esiprogrammi skripti, mis täidab teie teemas või pistikprogrammis AJAX-i päringuid, peate WordPressi AJAX-i URL-i muutujana sellele Javascriptile edastama, kasutades wp_localize_script().

Nüüd on teil Javascriptis juurdepääs globaalsele Javascripti objektile Theme_Variables(see nimi võib olla ükskõik milline), mille atribuudi väärtuseks on WordPressi AJAX-i URL ajax_url. Teie AJAX-i funktsioon oleks umbes selline:

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);
    });
});

AJAX-i kasutajaliideses käsitlemisel tuleb meeles pidada veel üht asja seoses konksuga, mida kasutate AJAX-i päringute vastuvõtmiseks. Te ühendate endiselt wp_ajax_<your action name>kasutajaga, kuid see konks töötab ainult sisse logitud külastajate puhul. Kui soovite esitada AJAX-i päringuid külastajatele, kes pole sisse logitud, peate (ka) ühendama wp_ajax_nopriv_<your action name>. Tavaliselt ühendaksite teema nõuetekohaseks toimimiseks vajalike esiosa AJAX-i päringute puhul mõlemaga, suunates need mõlemad samale funktsioonile.

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();
}

Mis puutub teie AJAX-i konksuga funktsiooni sisusse, siis see on sama, mis administraatoripäringute puhul. Teil on täielik juurdepääs WordPressile, saate tutvuda edastatud muutujatega $_POST, soovi korral tagastada midagi täites echoja te peaksite alati meeles pidama, et "surma" wp_die()kõige lõpus.

Teie AJAX-i taotluste kaitsmine

Kuna AJAX muudab andmete edastamise skripti ja taustaprogrammi vahel nii lihtsaks, peaksite kindlasti astuma vajalikke samme koodi turvaliseks muutmiseks. See hõlmab kõigi andmete desinfitseerimist enne nende salvestamist, aga ka WordPressi "nonce" funktsiooni kasutamist, et kontrollida, kas päringud tulevad õigetest ja aktsepteeritud asukohtadest. Kui te pole sellega tuttav, lugege korraks WordPressi dokumentatsiooni .

Põhieeldus on see; kasutate WordPressi meetodit, genereerides kas nonce väärtuse (wp_create_nonce()) või peidetud sisestusvälja, mille väärtuseks on nonce (wp_nonce_field()). AJAX-i päringus annate päringus edasi nonce’i väärtuse (mille on kodeerinud WordPress) ja aktsepteerivas osas (wp_ajax_konks) kinnitate nonce’i algse määratuga.

Lisame ülaltoodud näitekoodile veidi turvalisust. Kõigepealt genereerime nonce’i ja edastame selle wp_localize_scriptkoos AJAX-i URL-iga. Määrame parameetriks wp_create_nonce()unikaalse stringi, millest peaksime nii-öelda teadma ainult meie. Allolevas näites kasutan " awhitepixel-nonce".

See, mis meie Javascripti muutujates kasutajaliidesele edastatakse kui " nonce", on WordPressi genereeritud juhuslik arv. Keegi peale meie, selle stsenaariumi autorite, ei tea, et kehtiv nonce on " awhitepixel-nonce". Javascriptis võtame üles väärtuse nonce ja edastame selle kohe tagasi oma AJAX-i päringus:

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);
    });
});

Ja lõpuks meie wp_ajaxkonksuga funktsioonis peaksime alustama kontrollimisega, kas nonce kehtis koos wp_verify_nonce(). Pakume ülal määratud kordumatut stringi ja kui WordPress ei ühti selle stringiga edasi antud kordumatu kodeeritud väärtusega, lõpetame kohe:

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();
}