AJAX to technika, kt\u00f3rej mo\u017cesz u\u017cy\u0107 w JavaScript do pobierania danych z serwera i aktualizowania zawarto\u015bci Twojej strony bez prze\u0142adowywania jej w przegl\u0105darce. W tym po\u015bcie om\u00f3wimy, jak prawid\u0142owo u\u017cywa\u0107 AJAX w WordPressie.<\/p>\n
Wi\u0119kszo\u015b\u0107 z was prawdopodobnie jest zaznajomiona z wykonywaniem \u017c\u0105da\u0144 AJAX poza WordPress i chce dowiedzie\u0107 si\u0119, jak to zrobi\u0107 w WordPress. By\u0107 mo\u017ce zastanawiasz si\u0119 nad nast\u0119puj\u0105cymi pytaniami:<\/p>\n
W WordPressie mo\u017cesz wykonywa\u0107 \u017c\u0105dania AJAX w admin i\/lub frontendzie; proces jest taki sam, z kilkoma r\u00f3\u017cnicami w odpowiedziach na powy\u017csze pytania. Zanurzmy si\u0119 od razu!<\/p>\n
Pierwsz\u0105 rzecz\u0105, kt\u00f3rej potrzebujesz, jest oczywi\u015bcie skrypt java, do kt\u00f3rego chcesz wys\u0142a\u0107 \u017c\u0105danie AJAX. Powinien by\u0107 umieszczony w kolejce przy u\u017cyciu prawid\u0142owej metody dodawania skrypt\u00f3w do WordPressa<\/a>, zar\u00f3wno frontendu, jak i backendu. Najprawdopodobniej masz ju\u017c skonfigurowany skrypt, w kt\u00f3rym potrzebujesz tylko cz\u0119\u015bci wysy\u0142ania lub \u017c\u0105dania od WordPressa.<\/p>\n Publikowanie AJAX w WordPressie wymaga przekazania zmiennej obiektu JavaScript jako danych do \u017c\u0105dania. W obiekcie nale\u017cy zapewni\u0107 co najmniej jedn\u0105 nieruchomo\u015b\u0107; ’ Je\u015bli chodzi o odpowied\u017a na pytanie 1 powy\u017cej: na jaki adres URL nale\u017cy wys\u0142a\u0107 \u017c\u0105danie AJAX? R\u00f3\u017cni si\u0119 to w zale\u017cno\u015bci od tego, czy tw\u00f3j skrypt jest umieszczony w kolejce w admin czy w interfejsie. Poniewa\u017c AJAX jest ju\u017c wbudowany w ekrany administracyjne WordPress, mo\u017cesz po prostu u\u017cy\u0107 zmiennej globalnej Do obs\u0142ugi \u017c\u0105da\u0144 AJAX w PHP podpinasz si\u0119 do akcji Przejd\u017amy od razu do kodu. Zaczniemy od dodawania \u017c\u0105da\u0144 AJAX w panelu administracyjnym.<\/p>\n Zak\u0142adam, \u017ce masz ju\u017c w kolejce skrypt, kt\u00f3ry reaguje na jak\u0105\u015b akcj\u0119 u\u017cytkownika, zbiera dane i jest gotowy do wykonania \u017c\u0105dania AJAX, aby co\u015b zaktualizowa\u0107 lub za\u017c\u0105da\u0107 pewnych informacji z powrotem z WordPressa. Poni\u017cszy kod jest bardzo uproszczonym przyk\u0142adem; kod umieszcza plik JavaScript w motywie dla administratora, a wewn\u0105trz kodu JavaScript ustawia kilka zmiennych losowych, wykonuje AJAX podczas \u0142adowania strony i wy\u015bwietla odpowied\u017a w konsoli.<\/p>\n Jak wida\u0107 w powy\u017cszym kodzie JavaScript, konfigurujesz obiekt JavaScript (pomy\u015bl o tym jak o tablicy) ze wszystkimi danymi, kt\u00f3re chcesz przekaza\u0107, w tym wa\u017cn\u0105 Jak wspomniano powy\u017cej, poniewa\u017c AJAX jest ju\u017c wbudowany w ekrany administracyjne WordPress, po prostu u\u017cyj zmiennej globalnej Teraz dodamy kod akceptuj\u0105cy to \u017c\u0105danie AJAX w PHP. Poniewa\u017c poda\u0142em ’ Wewn\u0105trz swojej pod\u0142\u0105czonej funkcji masz pe\u0142ny dost\u0119p do WordPressa; mo\u017cesz korzysta\u0107 z dowolnych funkcji WordPress, zapyta\u0144 oraz uzyska\u0107 dost\u0119p do zmiennych globalnych (np Przekazywanie czego\u015b z powrotem do JavaScript jest opcjonalne (na przyk\u0142ad, gdy chcesz tylko wys\u0142a\u0107 pro\u015bb\u0119 o aktualizacj\u0119 lub zapisanie czego\u015b i nie potrzebujesz potwierdzenia). Je\u015bli chcesz co\u015b przekaza\u0107, po prostu Jedna wa\u017cna uwaga ko\u0144cowa w ostatniej linii; 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\u0107 AJAX. W powy\u017cszym przyk\u0142adzie do wykonywania AJAX w admin mieli\u015bmy ju\u017c globaln\u0105 zmienn\u0105 JavaScript Podczas kolejkowania skryptu frontendowego, kt\u00f3ry b\u0119dzie wykonywa\u0142 \u017c\u0105dania AJAX w motywie lub wtyczce, musisz przekaza\u0107 URL AJAX WordPressa jako zmienn\u0105 do tego kodu JavaScript, u\u017cywaj\u0105c Teraz w swoim JavaScript masz dost\u0119p do globalnego obiektu JavaScript Kiedy mamy do czynienia z AJAX w interfejsie u\u017cytkownika, nale\u017cy pami\u0119ta\u0107 o jeszcze jednej rzeczy, je\u015bli chodzi o hak u\u017cywany do akceptowania \u017c\u0105da\u0144 AJAX. Nadal podpinasz si\u0119 do Je\u015bli chodzi o zawarto\u015b\u0107 funkcji zaczepionej przez AJAX, jest ona taka sama jak w przypadku \u017c\u0105da\u0144 administratora. Masz pe\u0142ny dost\u0119p do WordPressa, czerpiesz z przekazanych zmiennych z Poniewa\u017c AJAX u\u0142atwia przekazywanie danych mi\u0119dzy skryptem a backendem, zdecydowanie powiniene\u015b podj\u0105\u0107 niezb\u0119dne kroki, aby Tw\u00f3j kod by\u0142 bezpieczny. Obejmuje to dezynfekcj\u0119 wszelkich danych przed ich zapisaniem, ale tak\u017ce wykorzystanie funkcji \u201enonce” WordPressa, aby sprawdzi\u0107, czy \u017c\u0105dania pochodz\u0105 z prawid\u0142owych i zaakceptowanych lokalizacji. Przeczytaj dokumentacj\u0119 WordPressa za jednym<\/a> razem, je\u015bli nie jeste\u015b z ni\u0105 zaznajomiony.<\/p>\n Podstawowym za\u0142o\u017ceniem jest to; u\u017cywasz metody WordPress, generuj\u0105c warto\u015b\u0107 jednorazow\u0105 ( Dodajmy troch\u0119 bezpiecze\u0144stwa do przyk\u0142adowego kodu, kt\u00f3ry zrobili\u015bmy powy\u017cej. Najpierw wygenerujemy jednorazow\u0105 warto\u015b\u0107 i przeka\u017cemy j\u0105 To, co jest przekazywane jako \u201e I na koniec w naszej action<\/code>’. Warto\u015b\u0107 w\u0142a\u015bciwo\u015bci \u201e action<\/code>" to ci\u0105g, kt\u00f3ry mo\u017ce by\u0107 (prawie) wszystkim, czego chcesz. Ta akcja m\u00f3wi WordPressowi, jak kierowa\u0107 \u017c\u0105danie AJAX. Ale definiuje r\u00f3wnie\u017c cz\u0119\u015b\u0107 nazwy podpi\u0119cia, do kt\u00f3rej b\u0119dziesz musia\u0142 podpi\u0105\u0107 si\u0119 w PHP w celu obs\u0142ugi \u017c\u0105dania AJAX.<\/p>\najaxurl<\/code>. Ale w przypadku \u017c\u0105da\u0144 frontendowych sprawa staje si\u0119 nieco bardziej skomplikowana, poniewa\u017c musisz r\u0119cznie poda\u0107 adres URL AJAX wraz z kodem JavaScript. Wi\u0119cej na ten temat poni\u017cej.<\/p>\nwp_ajax_<your action name><\/code>. Je\u015bli chcesz uruchamia\u0107 \u017c\u0105dania AJAX w interfejsie u\u017cytkownika dla niezalogowanych u\u017cytkownik\u00f3w, mo\u017cesz r\u00f3wnie\u017c pod\u0142\u0105czy\u0107 si\u0119 do wp_ajax_nopriv_<your action name><\/code>. Wi\u0119cej na ten temat poni\u017cej. Wewn\u0105trz funkcji przechwytuj\u0105cej mo\u017cesz uzyska\u0107 dost\u0119p do danych przekazanych z JavaScript, odwo\u0142uj\u0105c si\u0119 do $_POST<\/code>tablicy. Aby wys\u0142a\u0107 co\u015b z powrotem, po prostu co\u015b powtarzasz. To kr\u00f3tka odpowied\u017a na pytanie 2 powy\u017cej.<\/p>\nWykonywanie \u017c\u0105da\u0144 AJAX w administratorze WordPress<\/h2>\n
add_action('admin_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_send_something',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(ajaxurl, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\naction<\/code>w\u0142a\u015bciwo\u015bci\u0105 \u201e „.<\/p>\najaxurl<\/code>jako adresu URL AJAX.<\/p>\nawhitepixel_send_something<\/code>’ jako warto\u015b\u0107 ’ action<\/code>’, musz\u0119 si\u0119 podpi\u0105\u0107 wp_ajax_awhitepixel_send_something<\/code>.<\/p>\nadd_action('wp_ajax_awhitepixel_send_something', function() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n wp_die();\n});<\/code><\/pre>\n$wpdb<\/code>. dla zapyta\u0144 do bazy danych). Wszystkie zmienne, kt\u00f3re przekaza\u0142e\u015b w JavaScript b\u0119d\u0105 dost\u0119pne wewn\u0105trz $_POST<\/code>tablicy z kluczami podanymi w obiekcie JavaScript.<\/p>\necho<\/code>swoje wyj\u015bcie. W przypadku wyprowadzania bardziej z\u0142o\u017conych zmiennych ni\u017c zwyk\u0142y ci\u0105g znak\u00f3w, powiniene\u015b zwr\u00f3ci\u0107 go jako tablic\u0119 zakodowan\u0105 w formacie json, aby JavaScript m\u00f3g\u0142 go poprawnie odczyta\u0107 i przeanalizowa\u0107. Co\u015b takiego;<\/p>\n$pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\nwp_die()<\/code>. Wszystkie funkcje wywo\u0142ania zwrotnego AJAX powinny \u201ezamkn\u0105\u0107 w\u0105tek” lub zako\u0144czy\u0107 poprawnie, wykonuj\u0105c die()<\/code>lub exit()<\/code>. W WordPress u\u017cywamy wp_die()<\/code>do prawid\u0142owej integracji, ale wynik jest taki sam. Je\u015bli zdarzy ci si\u0119 uzyska\u0107 dziwne \u201e0″ w odpowiedziach AJAX, najprawdopodobniej dlatego nie zrobi\u0142 wp_die()<\/code>lub die()<\/code>. Zawsze, zawsze upewnij si\u0119, \u017ce \u201eumrzesz” na ko\u0144cu wszystkich funkcji pod\u0142\u0105czonych do wp_ajax<\/code>.<\/p>\nWykonywanie \u017c\u0105da\u0144 AJAX we frontendzie WordPress<\/h2>\n
ajaxurl<\/code>, ale ta zmienna nie jest dost\u0119pna nak\u0142adka. Musimy to zapewni\u0107 sami. Aby uzyska\u0107 warto\u015b\u0107 adresu URL AJAX WordPressa, kt\u00f3rego u\u017cywasz admin_url('admin-ajax.php')<\/code>(tak, \u201eadmin url” dla frontendu).<\/p>\nwp_localize_script()<\/code>.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nTheme_Variables<\/code>(ta nazwa mo\u017ce by\u0107 dowolna), z URL-em AJAX WordPressa jako warto\u015bci\u0105 ajax_url<\/code>w\u0142a\u015bciwo\u015bci \u201e „. Twoja funkcja AJAX wygl\u0105da\u0142aby mniej wi\u0119cej tak:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax_<your action name><\/code>, ale ten zaczep b\u0119dzie dzia\u0142a\u0142 tylko dla odwiedzaj\u0105cych, kt\u00f3rzy s\u0105 zalogowani. Je\u015bli chcesz wykonywa\u0107 \u017c\u0105dania AJAX dla odwiedzaj\u0105cych, kt\u00f3rzy nie s\u0105 zalogowani, musisz (r\u00f3wnie\u017c) podpi\u0105\u0107 si\u0119 do wp_ajax_nopriv_<your action name><\/code>. Normalnie w przypadku \u017c\u0105da\u0144 frontendowych AJAX, kt\u00f3re s\u0105 wymagane do prawid\u0142owego dzia\u0142ania motywu, nale\u017cy pod\u0142\u0105czy\u0107 si\u0119 do obu, wskazuj\u0105c im t\u0119 sam\u0105 funkcj\u0119.<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n$_POST<\/code>, opcjonalnie zwracasz co\u015b wykonuj\u0105c echo<\/code>, i zawsze powiniene\u015b zawsze pami\u0119ta\u0107, aby \u201eumrze\u0107” wp_die()<\/code>na samym ko\u0144cu.<\/p>\nZabezpieczanie Twoich \u017c\u0105da\u0144 AJAX<\/h2>\n
wp_create_nonce()<\/code>) lub generuj\u0105c ukryte pole wej\u015bciowe z warto\u015bci\u0105 jednorazow\u0105 (wp_nonce_field()<\/code>). W swoim \u017c\u0105daniu AJAX przekazujesz warto\u015b\u0107 nonce (kt\u00f3ra jest zakodowana przez WordPressa) w \u017c\u0105daniu, a w cz\u0119\u015bci akceptuj\u0105cej (wp_ajax_<\/code>hook) weryfikujesz warto\u015b\u0107 jednorazow\u0105 z tym, co ustawi\u0142e\u015b pierwotnie.<\/p>\nwp_localize_script<\/code>wraz z adresem URL AJAX. Jako parametr wp_create_nonce()<\/code>ustawiamy jaki\u015b unikalny ci\u0105g, o kt\u00f3rym tylko my powinni\u015bmy wiedzie\u0107, \u017ce tak powiem. W poni\u017cszym przyk\u0142adzie wybieram \u201e awhitepixel-nonce<\/code>„.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('awhitepixel-nonce')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nnonce<\/code>” w naszych zmiennych JavaScript do frontendu, to losowa liczba generowana przez WordPress. Nikt opr\u00f3cz nas, autor\u00f3w tego skryptu, nie wie, \u017ce wa\u017cny nonce to ’ awhitepixel-nonce<\/code>’. W naszym JavaScript pobieramy warto\u015b\u0107 nonce i przekazujemy j\u0105 z powrotem w naszym \u017c\u0105daniu AJAX:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14,\n 'nonce': Theme_Variables.nonce\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax<\/code>funkcji zaczepionej powinni\u015bmy zacz\u0105\u0107 od sprawdzenia, czy warto\u015b\u0107 jednorazowa by\u0142a poprawna za pomoc\u0105 wp_verify_nonce()<\/code>. Dostarczamy unikalny ci\u0105g, kt\u00f3ry ustawili\u015bmy powy\u017cej, a je\u015bli WordPress nie pasuje do unikalnej zakodowanej warto\u015bci przekazanej z tym ci\u0105giem, natychmiast ko\u0144czymy dzia\u0142anie:<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n wp_die(-1);\n }\n\u00a0\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n