Samouczek korzystania z AJAX w WordPress

Reklama

AJAX to niezwykła technologia internetowa, która wyszła poza proste „kliknij link, przejdź do innej strony" struktura Internet 1.0.

AJAX, co oznacza Asynchroniczne JavaScript i XML, umożliwia witrynom dynamiczne pobieranie i wyświetlanie treści bez odsuwania się użytkownika od bieżącej strony. Prowadzi to do znacznie bardziej interaktywnej obsługi i może także przyspieszyć, ponieważ nie trzeba ładować całej nowej strony internetowej. Na szczęście korzystanie z AJAX jest dość łatwe w środowisku WordPress, a dziś pokażę Ci, jak to zrobić.

Ten samouczek Ajax powinien być uważany za dość zaawansowany i jest kontynuowany od ostatniego razu, kiedy się uczyliśmy jak korzystać z niestandardowych tabel bazy danych Praca z niestandardowymi tabelami bazy danych w WordPressSzybki skan strony Best of WordPress Plugins ujawni niektóre z wielu unikalnych i niszowych sposobów na zwiększenie intensywności pracy blogu. Co jeśli masz już bazę danych ... Czytaj więcej z szablonu WordPress - w moim przykładzie użyto prostej istniejącej tabeli danych klienta. Jeśli chodzi o wstawianie rzeczy z powrotem do bazy danych, będziemy korzystać z odrobiny magii AJAX w WordPress.

Cały kod w dzisiejszym tutorialu będzie zatem odwoływał się do tego, co napisaliśmy ostatnim razem, ale jeśli szukasz tylko sposobu wykonywania AJAX w WordPress, jest to równie odpowiednie.

Dlaczego warto korzystać z AJAX?

Najczęstsze użycie AJAX jest związane z formularzami - sprawdzaniem, czy nazwa użytkownika jest zajęta, lub wypełnianiem pozostałej części formularza różnymi pytaniami w zależności od konkretnej udzielonej odpowiedzi. Zasadniczo jednak używasz AJAX, gdy chcesz wydarzenie (np. użytkownik klikający lub piszący coś) związany z po stronie serwera akcja występująca w tło.

Użyjemy go, aby dodać nowe wpisy do naszej ważnej niestandardowej tabeli bazy danych klientów, ale prawdopodobnie możesz wymyślić coś bardziej ekscytującego.

Omówienie korzystania z AJAX w WordPress

1. Edytuj niestandardowy szablon, aby uwzględnić zdarzenie formularza lub javascript, które prześle dane za pośrednictwem jQuery AJAX do admin-ajax.php w tym wszelkie dane postów, które chcesz przekazać. Upewnij się, że ładowany jest jQuery.
2. Zdefiniuj funkcję w swoim motywie function.php; przeczytaj zmienne wpisu i jeśli chcesz, zwróć coś użytkownikowi.
3. Dodaj Hak akcji AJAX dla twojej funkcji.

Tworzenie formularza

Zacznijmy od stworzenia prostego formularza w interfejsie do wprowadzania danych nowego klienta. To nic skomplikowanego, wystarczy zastąpić główną część niestandardowego szablonu tym kodem, który rozpoczęliśmy w zeszłym tygodniu, wokół którego odbywa się sprawdzanie is_user_logged_in ():

if (is_user_logged_in ()):?> 

Imię:E-mail:Telefon:Adres:

Jedyne, co może wyglądać dziwnie, to użycie ukrytego pola wejściowego o nazwie akcja - zawiera nazwę funkcji, którą uruchomimy przez AJAX.

Odbiornik PHP

Następnie otwórz functions.php i dodaj następujący wiersz, aby upewnić się, że jQuery jest ładowane w Twojej witrynie:

wp_enqueue_script ('jquery');

Podstawowa struktura pisania wywołania AJAX jest następująca:

funkcja myFunction () { //Zrób coś. umierać(); } add Działalności („wp_ajax_myFunction”, „myFunction”); add Działalności („wp_ajax_nopriv_myFunction”, „myFunction”);

Te dwie ostatnie linie to haki akcji, które informują WordPressa „Mam funkcję o nazwie myFunction i chcę, abyś jej wysłuchał, ponieważ będzie ona wywoływana przez interfejs AJAX” - pierwszy jest dla użytkowników na poziomie administratora, natomiast wp_ajax_nopriv_ jest dla użytkowników, którzy nie są zalogowani. Oto pełny kod dla functions.php którego zamierzamy użyć do wstawienia danych do naszej specjalnej tabeli klientów, co wyjaśnię wkrótce:

wp_enqueue_script ('jquery'); funkcja addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adres = $ _POST ['adres']; if ($ wpdb-> insert ('klienci', tablica ( „nazwa” => $ nazwa, „e-mail” => $ e-mail, „adres” => $ adres, „telefon” => $ telefon. )) FALSE) {echo „Error”; } jeszcze { echo „Klient”. $ nazwa. Pomyślnie dodano „, identyfikator wiersza to”. $ wpdb-> insert_id; } umierać(); } add działań („wp_ajax_addCustomer”, „addCustomer”); add działań („wp_ajax_nopriv_addCustomer”, „addCustomer”); // naprawdę nie potrzebne

Tak jak poprzednio, deklarujemy globalny $ wpdb aby dać nam bezpośredni dostęp do bazy danych. Następnie chwytamy POCZTA zmienne, które zawierają dane formularza. W instrukcji IF znajduje się funkcja $ wpdb-> insert, którego używamy do wstawiania danych do naszej tabeli. Ponieważ WordPress zapewnia określone funkcje do wstawiania zwykłych postów i metadanych, to $ wpdb-> insert Metoda jest zwykle używana tylko w przypadku tabel niestandardowych. Możesz czytaj więcej na ten temat w Kodeksie, ale w zasadzie wymaga nazwy tabeli, do której ma zostać wstawiony, po której następuje szyk z pary kolumna / wartość.

The FAŁSZYWE sprawdza, czy funkcja wstawiania nie powiodła się, a jeśli tak, wyświetla „błąd“. Jeśli nie, po prostu wysyłamy wiadomość do tego użytkownika Klient X został dodanyi echo $ wpdb-> insert_id zmienna, która wskazuje zmienna automatycznego przyrostu ostatniej operacji wstawiania, która się wydarzyła (zakładając, że ustawiłeś pole, które automatycznie zwiększa, np. identyfikator).

Wreszcie, umierać() zastąpi wartość domyślną die (0) dostarczone przez WordPress - nie jest to konieczne jako takie, ale bez niego dostaniesz 0 dołączane na końcu wszystkiego, co odsyłasz z powrotem do szablonu.

JavaScript

Ostatnim krokiem jest magiczny bit - faktyczny Javascript, który zainicjuje wywołanie AJAX. Zauważysz, że w formularzu, który dodaliśmy wcześniej, pole akcji pozostało puste. To dlatego, że zastąpimy to naszym wywołaniem AJAX. Ogólny sposób to zrobić:

jQuery.ajax ({type: "POST", adres URL: "/wp-admin/admin-ajax.php", // dane naszego pliku obsługi PHP: „myDataString”, sukces: funkcja (wyniki) {// zrób coś z zwrócone dane})};

To będzie podstawowa struktura wywołania AJAX, której będziemy używać, ale na pewno nie jedyny sposób, w jaki możesz to zrobić. Być może zastanawiasz się, dlaczego mamy na myśli wp-admin tutaj, nawet jeśli będzie to na froncie strony. Właśnie tam Moduł obsługi AJAX rezyduje, niezależnie od tego, czy używasz go do funkcji frontowych czy administracyjnych - mylące, wiem. Wklej następujący kod bezpośrednio do szablonu klienta:

W pierwszym wierszu dołączamy naszą funkcję ajaxSubmit do formularza, który utworzyliśmy wcześniej - więc gdy użytkownik kliknie przycisk Prześlij, przechodzi przez naszą specjalną funkcję AJAX. Bez tego nasza forma nic nie zrobi. W naszym ajaxSubmit () funkcja, pierwszą rzeczą, którą robimy, jest serialize () formularz. To po prostu przyjmuje wszystkie wartości formularza i zamienia je w jeden długi ciąg, który nasz PHP przeanalizuje później. Jeśli wszystko się powiedzie, umieścimy zwrócone dane w DIV z identyfikatorem opinii.

Otóż ​​to. Zapisz wszystko, odśwież i spróbuj przesłać niektóre dane formularza. Jeśli masz problemy, możesz wyświetlić pełny kod szablonu strony tutaj (na podstawie domyślnego motywu dwadzieścia jedenastu)oraz kod do dodania tu funkcje.php(nie zastępuj, po prostu dodaj to na końcu).

O czym należy pamiętać

Bezpieczeństwo: Ten kod nie jest gotowy do produkcji i służy wyłącznie do nauki. Pominęliśmy jeden kluczowy punkt, a mianowicie użycie wp-nonce - jednorazowy kod generowany przez WordPress, który zapewnia, że ​​żądanie AJAX przychodzi tylko tam, gdzie było zamierzone; hasło, jeśli chcesz. Bez tego twoja funkcja mogłaby być skutecznie wykorzystana do wstawiania losowych danych. Ataki polegające na wstrzykiwaniu SQL nie stanowią jednak problemu, ponieważ kierowaliśmy zapytania przez WordPress $ wpdb-> insert funkcja - WordPress czyści dla ciebie wszelkie dane wejściowe i zapewnia ich bezpieczeństwo.

Aktualizacja tabeli klientów: W tej chwili wysyłamy tylko wiadomość z potwierdzeniem, ale tabela klientów nie jest aktualizowana - dodatkowe wpisy zobaczysz tylko po odświeżeniu strony (Który rodzaj pokonuje cel robienia tego wszystkiego za pośrednictwem AJAX). Sprawdź, czy możesz stworzyć nową funkcję AJAX, która może dynamicznie generować tabelę.

Sprawdzanie poprawności danych wejściowych: ponieważ nie jest przeprowadzana walidacja danych formularza, w rzeczywistości można dodać puste wpisy lub wiele wpisów, jeśli naciśniesz zbyt wiele razy. Przydałaby się weryfikacja danych wejściowych w polach formularza, wyczyszczenie ich po zakończeniu, a także SQL, aby sprawdzić adres e-mail lub numer telefonu, który już nie istnieje w bazie danych.

To wszystko ode mnie w tym tygodniu - jeśli miałeś jakiekolwiek problemy z tym samouczkiem, skontaktuj się z nami poprzez komentarze, a ja postaram się Ci pomóc; lub jeśli próbujesz to w jakiś sposób dostosować, możesz odesłać ode mnie pomysły. Mam nadzieję, że to naprawdę pokaże, jak wiele możesz zrobić w WordPress, po prostu łącząc trochę JavaScript, PHP i MySQL. Jak zawsze, nie zapomnij sprawdzić wszystkich innych Artykuły WordPress.