AJAX on tekniikka, jota voit käyttää Javascriptissä tietojen hakemiseen palvelimelta ja sivusi sisällön päivittämiseen lataamatta sitä uudelleen selaimeesi. Tässä viestissä sukeltaamme siihen, kuinka AJAXia käytetään oikein WordPressissä.
Useimmat teistä ovat luultavasti perehtyneet AJAX-pyyntöjen suorittamiseen WordPressin ulkopuolella ja haluavat selvittää, miten se tehdään WordPressissä. Saatat miettiä seuraavia kysymyksiä:
- Mihin URL-osoitteeseen sinun tulee lähettää AJAX-pyyntösi Javascriptissäsi.
- Kuinka saada AJAX-pyyntö todella kiinni PHP:ssä, noutaa sen tiedot ja lähettää jotain takaisin.
- Varmista, että AJAX-pyyntösi ovat turvallisia.
WordPressissä voit suorittaa AJAX-pyyntöjä järjestelmänvalvojassa ja/tai käyttöliittymässä; prosessi on sama, mutta yllä oleviin kysymyksiin vastaamisessa on muutamia eroja. Sukellaan heti sisään!
AJAX-pyynnön suorittamisen perusteet WordPressissä
Ensimmäinen asia, jonka tarvitset, on tietysti javascript, johon haluat lähettää AJAX-pyynnön. Se tulee asettaa jonoon käyttämällä kelvollista menetelmää lisätä komentosarjoja WordPressiin, joko käyttöliittymään tai taustajärjestelmään. Todennäköisesti sinulla on jo skripti, jossa tarvitset vain osan lähettää tai pyytää jotain WordPressistä.
AJAXin lähettäminen WordPressissä edellyttää Javascript-objektimuuttujan välittämistä tietona pyyntöön. Objektissa sinun on annettava vähintään yksi ominaisuus; ‘ action‘. Ominaisuuden arvo actionon merkkijono, joka voi olla (melkein) mitä tahansa haluat. Tämä toiminto kertoo WordPressille, kuinka AJAX-pyyntö reititetään. Mutta se määrittelee myös osan koukun nimestä, johon sinun on kytkettävä PHP:ssa AJAX-pyynnön käsittelyä varten.
Mitä tulee kysymykseen 1 vastaamiseen yllä: mihin URL-osoitteeseen sinun tulee lähettää AJAX-pyyntösi? Tämä vaihtelee sen mukaan, onko komentosarjasi jonossa järjestelmänvalvojassa vai käyttöliittymässä. Koska AJAX on jo sisäänrakennettu WordPressin hallintaruutuihin, voit käyttää globaalia muuttujaa ajaxurl. Mutta käyttöliittymäpyynnöissä se on hieman monimutkaisempi, koska sinun on annettava AJAX-URL manuaalisesti Javascriptin kanssa. Siitä lisää alla.
AJAX-pyyntöjen käsittelemiseksi PHP:ssä kytketään toimintoon wp_ajax_<your action name>. Jos haluat suorittaa AJAX-pyyntöjä käyttöliittymässä ei-kirjautuneille käyttäjille, voit myös kytkeä palvelimeen wp_ajax_nopriv_<your action name>. Siitä lisää alla. Koukussa olevan funktion sisällä pääset käsiksi Javascriptistä välitettyihin tietoihin viittaamalla $_POSTtaulukkoon. Jos haluat tulostaa jotain takaisin, yksinkertaisesti toistat jotain. Tämä on lyhyt vastaus kysymykseen 2 yllä.
Sukellaanpa suoraan koodiin. Aloitamme AJAX-pyyntöjen lisäämisestä hallintapaneeliin.
AJAX-pyyntöjen suorittaminen WordPress-järjestelmänvalvojassa
Oletan, että sinulla on jo jonossa komentosarja, joka reagoi johonkin käyttäjän toimintaan, kerää tietoja ja on valmis suorittamaan AJAX-pyynnön joko päivittääkseen jotain tai pyytääkseen tietoja takaisin WordPressistä. Alla oleva koodi on hyvin yksinkertaistettu esimerkki; koodi jonottaa Javascript-tiedoston teemassa järjestelmänvalvojalle, ja Javascript-koodin sisällä se asettaa satunnaismuuttujia, suorittaa AJAX:n sivun latauksen yhteydessä ja tulostaa vastauksen konsolissa.
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);
});
});Kuten yllä olevasta Javascript-koodista näkyy, määrität Javascript-objektin (ajattele sitä taulukkona), joka sisältää kaikki tiedot, jotka haluat välittää, mukaan lukien tärkeä actionominaisuus.
Kuten edellä mainittiin, koska AJAX on jo sisäänrakennettu WordPress-hallintanäyttöihin, käytät yksinkertaisesti globaalia muuttujaa ajaxurlAJAX-URL-osoitteena.
Nyt lisäämme koodin tämän AJAX-pyynnön hyväksymiseksi PHP:ssä. Koska annoin awhitepixel_send_somethingarvon ‘ ‘:n arvoksi action, minun on kytkettävä laitteeseen 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();
});Koukussa olevan toiminnon sisällä sinulla on täysi pääsy WordPressiin; voit käyttää mitä tahansa WordPressin toimintoja, kyselyitä ja käyttää globaaleja muuttujia (esim $wpdb. tietokantakyselyihin). Kaikki Javascriptissä antamasi muuttujat ovat käytettävissä $_POSTtaulukossa Javascript-objektissa antamillasi avaimilla.
On valinnaista siirtää jotain takaisin Javascriptiin (esimerkiksi kun haluat vain lähettää pyynnön päivittää tai tallentaa jotain etkä tarvitse vahvistusta). Jos haluat välittää jotain takaisin, yksinkertaisesti echotulostasi. Jos haluat tulostaa monimutkaisempia muuttujia kuin pelkkä merkkijono, sinun tulee palauttaa se json-koodattuna taulukkona, jotta Javascript voi lukea ja jäsentää sen oikein. Jotain tällaista;
Yksi tärkeä viimeinen huomautus viimeisellä rivillä; wp_die(). Kaikkien AJAX-soittotoimintojen tulee "sulkea lanka" tai lopettaa kunnolla tekemällä die()tai exit(). WordPressissä käytämme wp_die()oikeaa integrointia, mutta tulos on sama. Jos saat AJAX-vastauksiin outoa "0", se johtuu todennäköisesti siitä, että ei tehnyt wp_die()tai die(). Varmista aina, että "kuolet" kaikkien toimintojen lopussa, jotka on kytketty wp_ajax.
AJAX-pyyntöjen suorittaminen WordPress-käyttöliittymässä
AJAX:n suorittaminen käyttöliittymässä on sama kuin järjestelmänvalvojassa, mutta hieman monimutkaisempi vastaus kysymykseen 1: mihin URL-osoitteeseen AJAXin tulisi lähettää. Yllä olevassa esimerkissä AJAX:n suorittamisesta järjestelmänvalvojassa meillä oli jo globaali Javascript-muuttuja ajaxurl, mutta tämä muuttuja ei ole käytettävissä käyttöliittymässä. Meidän on tarjottava se itse. Käyttämäsi WordPressin AJAX-URL-osoitteen arvon saamiseksi admin_url('admin-ajax.php')(kyllä, "admin url" käyttöliittymälle).
Kun asetat jonoon käyttöliittymän komentosarjan, joka suorittaa AJAX-pyyntöjä teemassasi tai laajennuksessasi, sinun on välitettävä WordPressin AJAX-URL-osoite muuttujana kyseiselle Javascriptille käyttämällä wp_localize_script().
Nyt sinulla on Javascriptissäsi pääsy globaaliin Javascript-objektiin Theme_Variables(tämä nimi voi olla mikä tahansa), jonka arvona on WordPressin AJAX-URL-osoite ajax_urlominaisuudelle. AJAX-toimintosi olisi jotain tällaista:
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);
});
});Käsitellessäsi AJAXia käyttöliittymässä on vielä yksi asia, joka tulee pitää mielessä koukkuun liittyen, jota käytät AJAX-pyyntöjen hyväksymiseen. Pidät silti koukun wp_ajax_<your action name>, mutta tämä koukku toimii vain sisäänkirjautuneille vierailijoille. Jos haluat suorittaa AJAX-pyyntöjä vierailijoille, jotka eivät ole kirjautuneet sisään, sinun on (myös) kytkettävä wp_ajax_nopriv_<your action name>. Normaalisti käyttöliittymän AJAX-pyynnöissä, jotka ovat tarpeen, jotta teema toimisi kunnolla, kytketään molempiin ja osoitetaan molemmat samaan toimintoon.
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();
}Mitä tulee AJAX-kytkentätoiminnon sisältöön, se on sama kuin järjestelmänvalvojan pyynnöissä. Sinulla on täydellinen pääsy WordPressiin, saat käsiinsä välitetyt muuttujat osoitteesta $_POST, valinnaisesti palautat jotain suorittamalla echo, ja sinun tulee aina, aina muistaa "kulla" kanssa wp_die()aivan lopussa.
Suojaa AJAX-pyyntösi
Koska AJAX tekee tietojen siirtämisestä skriptin ja taustajärjestelmän välillä niin helppoa, sinun tulee ehdottomasti ryhtyä tarvittaviin toimenpiteisiin suojataksesi koodisi. Tämä sisältää kaikkien tietojen puhdistamisen ennen niiden tallentamista, mutta myös WordPressin "nonce"-toiminnon käyttämisen sen tarkistamiseksi, tulevatko pyynnöt oikeista ja hyväksytyistä paikoista. Lue WordPressin dokumentaatio kerran, jos et tunne sitä.
Perusoletus on tämä; käytät WordPress-menetelmää joko luomalla nonce-arvon (wp_create_nonce()) tai luomalla piilotetun syöttökentän, jossa arvona on nonce (wp_nonce_field()). AJAX-pyynnössäsi välität nonce-arvon (jonka on koodattu WordPressillä) pyynnössä, ja hyväksyvässä osassa (wp_ajax_hook) vahvistat nonce-arvon alun perin asettamillasi asetuksilla.
Lisätään hieman suojausta yllä olevaan esimerkkikoodiin. Ensin luodaan nonce ja välitetään se wp_localize_scriptAJAX-URL-osoitteeseen. Asetamme parametriksi wp_create_nonce()ainutlaatuisen merkkijonon, josta vain meidän pitäisi tietää niin sanotusti. Alla olevassa esimerkissä käytän ‘ awhitepixel-nonce‘.
Se, mikä välitetään nonceJavascript-muuttujissamme käyttöliittymälle muodossa " ", on WordPressin luoma satunnaistettu luku. Kukaan muu kuin me, tämän käsikirjoituksen kirjoittajat, tiedä, että kelvollinen nonce on ‘ awhitepixel-nonce‘. Javascriptissämme poimimme nonce-arvon ja välitämme sen heti takaisin AJAX-pyyntöömme:
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 lopuksi wp_ajaxkoukussa funktiossamme meidän pitäisi aloittaa tarkistamalla, oliko nonce voimassa wp_verify_nonce(). Tarjoamme yllä asettamamme ainutlaatuisen merkkijonon, ja jos WordPress ei vastaa tämän merkkijonon välitettyä ainutlaatuista koodattua arvoa, lopetamme välittömästi:
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();
}