AJAX to technika, której możesz użyć w JavaScript do pobierania danych z serwera i aktualizowania zawartości Twojej strony bez przeładowywania jej w przeglądarce. W tym poście omówimy, jak prawidłowo używać AJAX w WordPressie.
Większość z was prawdopodobnie jest zaznajomiona z wykonywaniem żądań AJAX poza WordPress i chce dowiedzieć się, jak to zrobić w WordPress. Być może zastanawiasz się nad następującymi pytaniami:
- Do którego adresu URL należy wysyłać żądania AJAX w swoim JavaScript.
- Jak faktycznie przechwycić żądanie AJAX w PHP, pobrać jego dane i wysłać coś z powrotem.
- Upewnij się, że Twoje żądania AJAX są bezpieczne.
W WordPressie możesz wykonywać żądania AJAX w admin i/lub frontendzie; proces jest taki sam, z kilkoma różnicami w odpowiedziach na powyższe pytania. Zanurzmy się od razu!
Podstawy wykonywania żądań AJAX w WordPress
Pierwszą rzeczą, której potrzebujesz, jest oczywiście skrypt java, do którego chcesz wysłać żądanie AJAX. Powinien być umieszczony w kolejce przy użyciu prawidłowej metody dodawania skryptów do WordPressa, zarówno frontendu, jak i backendu. Najprawdopodobniej masz już skonfigurowany skrypt, w którym potrzebujesz tylko części wysyłania lub żądania od WordPressa.
Publikowanie AJAX w WordPressie wymaga przekazania zmiennej obiektu JavaScript jako danych do żądania. W obiekcie należy zapewnić co najmniej jedną nieruchomość; ‘ action‘. Wartość właściwości „ action" to ciąg, który może być (prawie) wszystkim, czego chcesz. Ta akcja mówi WordPressowi, jak kierować żądanie AJAX. Ale definiuje również część nazwy podpięcia, do której będziesz musiał podpiąć się w PHP w celu obsługi żądania AJAX.
Jeśli chodzi o odpowiedź na pytanie 1 powyżej: na jaki adres URL należy wysłać żądanie AJAX? Różni się to w zależności od tego, czy twój skrypt jest umieszczony w kolejce w admin czy w interfejsie. Ponieważ AJAX jest już wbudowany w ekrany administracyjne WordPress, możesz po prostu użyć zmiennej globalnej ajaxurl. Ale w przypadku żądań frontendowych sprawa staje się nieco bardziej skomplikowana, ponieważ musisz ręcznie podać adres URL AJAX wraz z kodem JavaScript. Więcej na ten temat poniżej.
Do obsługi żądań AJAX w PHP podpinasz się do akcji wp_ajax_<your action name>. Jeśli chcesz uruchamiać żądania AJAX w interfejsie użytkownika dla niezalogowanych użytkowników, możesz również podłączyć się do wp_ajax_nopriv_<your action name>. Więcej na ten temat poniżej. Wewnątrz funkcji przechwytującej możesz uzyskać dostęp do danych przekazanych z JavaScript, odwołując się do $_POSTtablicy. Aby wysłać coś z powrotem, po prostu coś powtarzasz. To krótka odpowiedź na pytanie 2 powyżej.
Przejdźmy od razu do kodu. Zaczniemy od dodawania żądań AJAX w panelu administracyjnym.
Wykonywanie żądań AJAX w administratorze WordPress
Zakładam, że masz już w kolejce skrypt, który reaguje na jakąś akcję użytkownika, zbiera dane i jest gotowy do wykonania żądania AJAX, aby coś zaktualizować lub zażądać pewnych informacji z powrotem z WordPressa. Poniższy kod jest bardzo uproszczonym przykładem; kod umieszcza plik JavaScript w motywie dla administratora, a wewnątrz kodu JavaScript ustawia kilka zmiennych losowych, wykonuje AJAX podczas ładowania strony i wyświetla odpowiedź w konsoli.
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);
});
});Jak widać w powyższym kodzie JavaScript, konfigurujesz obiekt JavaScript (pomyśl o tym jak o tablicy) ze wszystkimi danymi, które chcesz przekazać, w tym ważną actionwłaściwością „ “.
Jak wspomniano powyżej, ponieważ AJAX jest już wbudowany w ekrany administracyjne WordPress, po prostu użyj zmiennej globalnej ajaxurljako adresu URL AJAX.
Teraz dodamy kod akceptujący to żądanie AJAX w PHP. Ponieważ podałem ‘ awhitepixel_send_something‘ jako wartość ‘ action‘, muszę się podpiąć 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();
});Wewnątrz swojej podłączonej funkcji masz pełny dostęp do WordPressa; możesz korzystać z dowolnych funkcji WordPress, zapytań oraz uzyskać dostęp do zmiennych globalnych (np $wpdb. dla zapytań do bazy danych). Wszystkie zmienne, które przekazałeś w JavaScript będą dostępne wewnątrz $_POSTtablicy z kluczami podanymi w obiekcie JavaScript.
Przekazywanie czegoś z powrotem do JavaScript jest opcjonalne (na przykład, gdy chcesz tylko wysłać prośbę o aktualizację lub zapisanie czegoś i nie potrzebujesz potwierdzenia). Jeśli chcesz coś przekazać, po prostu echoswoje wyjście. W przypadku wyprowadzania bardziej złożonych zmiennych niż zwykły ciąg znaków, powinieneś zwrócić go jako tablicę zakodowaną w formacie json, aby JavaScript mógł go poprawnie odczytać i przeanalizować. Coś takiego;
Jedna ważna uwaga końcowa w ostatniej linii; wp_die(). Wszystkie funkcje wywołania zwrotnego AJAX powinny „zamknąć wątek” lub zakończyć poprawnie, wykonując die()lub exit(). W WordPress używamy wp_die()do prawidłowej integracji, ale wynik jest taki sam. Jeśli zdarzy ci się uzyskać dziwne „0″ w odpowiedziach AJAX, najprawdopodobniej dlatego nie zrobił wp_die()lub die(). Zawsze, zawsze upewnij się, że „umrzesz” na końcu wszystkich funkcji podłączonych do wp_ajax.
Wykonywanie żądań AJAX we frontendzie WordPress
Proces wykonywania AJAX w interfejsie jest taki sam jak w admin, ale nieco bardziej skomplikowany w odpowiedzi na pytanie 1: do jakiego adresu URL powinien publikować AJAX. W powyższym przykładzie do wykonywania AJAX w admin mieliśmy już globalną zmienną JavaScript ajaxurl, ale ta zmienna nie jest dostępna nakładka. Musimy to zapewnić sami. Aby uzyskać wartość adresu URL AJAX WordPressa, którego używasz admin_url('admin-ajax.php')(tak, „admin url” dla frontendu).
Podczas kolejkowania skryptu frontendowego, który będzie wykonywał żądania AJAX w motywie lub wtyczce, musisz przekazać URL AJAX WordPressa jako zmienną do tego kodu JavaScript, używając wp_localize_script().
Teraz w swoim JavaScript masz dostęp do globalnego obiektu JavaScript Theme_Variables(ta nazwa może być dowolna), z URL-em AJAX WordPressa jako wartością ajax_urlwłaściwości „ “. Twoja funkcja AJAX wyglądałaby mniej więcej tak:
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);
});
});Kiedy mamy do czynienia z AJAX w interfejsie użytkownika, należy pamiętać o jeszcze jednej rzeczy, jeśli chodzi o hak używany do akceptowania żądań AJAX. Nadal podpinasz się do wp_ajax_<your action name>, ale ten zaczep będzie działał tylko dla odwiedzających, którzy są zalogowani. Jeśli chcesz wykonywać żądania AJAX dla odwiedzających, którzy nie są zalogowani, musisz (również) podpiąć się do wp_ajax_nopriv_<your action name>. Normalnie w przypadku żądań frontendowych AJAX, które są wymagane do prawidłowego działania motywu, należy podłączyć się do obu, wskazując im tę samą funkcję.
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();
}Jeśli chodzi o zawartość funkcji zaczepionej przez AJAX, jest ona taka sama jak w przypadku żądań administratora. Masz pełny dostęp do WordPressa, czerpiesz z przekazanych zmiennych z $_POST, opcjonalnie zwracasz coś wykonując echo, i zawsze powinieneś zawsze pamiętać, aby „umrzeć” wp_die()na samym końcu.
Zabezpieczanie Twoich żądań AJAX
Ponieważ AJAX ułatwia przekazywanie danych między skryptem a backendem, zdecydowanie powinieneś podjąć niezbędne kroki, aby Twój kod był bezpieczny. Obejmuje to dezynfekcję wszelkich danych przed ich zapisaniem, ale także wykorzystanie funkcji „nonce” WordPressa, aby sprawdzić, czy żądania pochodzą z prawidłowych i zaakceptowanych lokalizacji. Przeczytaj dokumentację WordPressa za jednym razem, jeśli nie jesteś z nią zaznajomiony.
Podstawowym założeniem jest to; używasz metody WordPress, generując wartość jednorazową (wp_create_nonce()) lub generując ukryte pole wejściowe z wartością jednorazową (wp_nonce_field()). W swoim żądaniu AJAX przekazujesz wartość nonce (która jest zakodowana przez WordPressa) w żądaniu, a w części akceptującej (wp_ajax_hook) weryfikujesz wartość jednorazową z tym, co ustawiłeś pierwotnie.
Dodajmy trochę bezpieczeństwa do przykładowego kodu, który zrobiliśmy powyżej. Najpierw wygenerujemy jednorazową wartość i przekażemy ją wp_localize_scriptwraz z adresem URL AJAX. Jako parametr wp_create_nonce()ustawiamy jakiś unikalny ciąg, o którym tylko my powinniśmy wiedzieć, że tak powiem. W poniższym przykładzie wybieram „ awhitepixel-nonce“.
To, co jest przekazywane jako „ nonce” w naszych zmiennych JavaScript do frontendu, to losowa liczba generowana przez WordPress. Nikt oprócz nas, autorów tego skryptu, nie wie, że ważny nonce to ‘ awhitepixel-nonce‘. W naszym JavaScript pobieramy wartość nonce i przekazujemy ją z powrotem w naszym żądaniu AJAX:
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);
});
});I na koniec w naszej wp_ajaxfunkcji zaczepionej powinniśmy zacząć od sprawdzenia, czy wartość jednorazowa była poprawna za pomocą wp_verify_nonce(). Dostarczamy unikalny ciąg, który ustawiliśmy powyżej, a jeśli WordPress nie pasuje do unikalnej zakodowanej wartości przekazanej z tym ciągiem, natychmiast kończymy działanie:
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();
}