Tutorial o korištenju AJAX-a u WordPress-u

AJAX je izvanredna web tehnologija koja nas je odmaknula od jednostavnog “kliknite vezu, idite na drugu stranicu” struktura Internet 1.0.

AJAX, što se zalaže Asinhroni Javascript i XML, web-lokacijama omogućuje dinamičko dohvaćanje i prikazivanje sadržaja bez da se korisnik udalji od trenutne stranice. To dovodi do daleko interaktivnijeg korisničkog iskustva i stvari također mogu ubrzati jer se ne mora učitati nova web stranica. Srećom, korištenje AJAX-a vrlo je jednostavno iz WordPress okruženja, a danas ću vam pokazati kako.

Ovaj Ajax udžbenik treba smatrati prilično naprednim i nastavlja se od posljednjeg vremena gdje smo naučili kako koristiti prilagođene tablice baza podataka Rad sa tablicama prilagođenih baza podataka u WordPressu Rad s tablicama prilagođenih baza podataka u WordPressu Brzo skeniranje stranice Best of WordPress Plugins otkriće neke od mnogih jedinstvenih i nišnih načina na koje možete učiniti da vaš blog radi teže. Što ako već imate bazu podataka ... iz WordPress predloška - u mom primjeru korištena je jednostavna postojeća tablica podataka o klijentima. Kad je u pitanju ponovno umetanje stvari u bazu podataka, koristit ćemo malu AJAX magiju u WordPressu.

Sav kôd u današnjem vodiču stoga će se odnositi na ono što smo napisali prošli put, ali ako samo tražite kako napraviti AJAX u WordPressu, jednako je važan..

Zašto koristiti AJAX?

AJAX se najčešće koristi u vezi s obrascima - provjerom da li se koristi korisničko ime ili ostatkom obrasca popunjavate različitim pitanjima, ovisno o konkretnom odgovoru koji date. U osnovi, AJAX koristite kad god želite događaj (poput korisnika koji nešto klikne ili upiše nešto) vezan za a na strani poslužitelja radnja koja se događa u pozadina.

Koristit ćemo ga za dodavanje novih unosa u našu važnu tablicu podataka o prilagođenim kupcima, ali vjerojatno možete smisliti nešto uzbudljivije.

Pregled kako koristiti AJAX u WordPressu

1. Uredite vlastiti predložak tako da sadrži obrazac ili JavaScript događaj koji će slati podatke putem jQuery AJAX admin-ajax.php uključujući podatke o objavljivanju koje želite poslati. Provjerite je li se učitao jQuery.
2. Definirajte funkciju u svojoj temi function.php; pročitajte varijable posta i vratite korisniku nešto po želji.
3. Dodajte AJAX akcijska kuka za svoju funkciju.

Izrada obrasca

Započnimo stvaranjem jednostavnog obrasca na prednjoj strani za unošenje novih detalja o kupcu. Ništa komplicirano, samo glavni dio svog prilagođenog predloška zamijenite ovim kodom koji smo započeli prošlog tjedna, a gdje se nalazi provjera is_user_logged_in ():

if (is_user_logged_in ()):?> Ime: E-pošta: Telefon: Adresa:     

  

Jedino što bi vam moglo izgledati čudno jest uporaba skrivenog polja unosa radnja - ovo sadrži naziv funkcije koju ćemo pokrenuti putem AJAX-a.

PHP prijemnik

Zatim otvorite functions.php i dodajte sljedeći redak da biste osigurali da se jQuery učitava na vašoj web lokaciji:

wp_enqueue_script ( 'jquery');

Osnovna struktura za pisanje AJAX poziva je sljedeća:

funkcija myFunction () // učiniti nešto umrijeti ();  dodavanje datoteke ('wp_ajax_myFunction', 'myFunction'); dodavanje ('wp_ajax_nopriv_myFunction', 'myFunction');

Ta posljednja dva retka su akcijske kuke koje govore WordPressu “Imam funkciju koja se zove myFunction, i želim da je poslušate jer će se ona nazivati ​​preko AJAX sučelja” - prvi je za korisnike na razini administratora, dok wp_ajax_nopriv_ je za korisnike koji nisu prijavljeni. Evo potpunog koda za functions.php koji ćemo koristiti za umetanje podataka u našu posebnu tablicu kupaca, što ću ukratko objasniti:

wp_enqueue_script ( 'jquery'); funkcija addCustomer () globalni $ wpdb; $ name = $ _POST ['ime']; $ phone = $ _POST ['telefon']; $ email = $ _POST ['email']; $ adresa = $ _POST ['adresa']; if ($ wpdb-> insert ('klijenti', niz ('ime' => $ ime, 'email' => $ email, 'adresa' => $ adresa, 'telefon' => $ telefon)) === FALSE) echo "Pogreška";  else echo "Kupac '". $ name. "'uspješno dodano, ID retka je". $ wpdb-> insert_id;  umrijeti ();  dodavanje datoteke ('wp_ajax_addCustomer', 'addCustomer'); dodavanje ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nije baš potreban

Baš kao i prije, to proglašavamo globalni $ wpdb da nam omogući izravan pristup bazi podataka. Tada hvatamo POST varijable koje sadrže podatke oblika. U okruženju IF izjave nalazi se funkcija $ Wpdb-> umetak, što koristimo za umetanje podataka u našu tablicu. Budući da WordPress pruža specifične funkcije za umetanje redovitih postova i meta podataka, ovo $ Wpdb-> umetak metoda se uglavnom koristi samo za prilagođene tablice. O tome možete govoriti o Codexu, ali u osnovi je potrebno da se unese tabela u koju slijedi an red od parovi stupaca / vrijednosti.

=== FALSE provjerava da li funkcija umetanja nije uspjela, a ako je odgovor, izlazi “greška“. Ako ne, samo šaljemo poruku korisniku Korisnik X je dodan, i odjekuje $ Wpdb-> insert_id varijabla, koja označava auto-prirasta varijabla zadnjeg umetanja koje se dogodilo (pod pretpostavkom da ste postavili polje koje se automatski povećava, poput ID-a).

Konačno, umrijeti() nadjačit će zadani die (0) koju pruža WordPress - ovo nije bitno, ali bez njega ćete i dobiti 0 na kraj bilo čega što pošaljete natrag u predložak.

Javascript

Posljednji korak je čarobni bit - stvarni Javascript koji će pokrenuti AJAX poziv. Primijetit ćete da je u obliku koji smo prethodno dodali polje radnje ostalo prazno. To je zato što ćemo ovo nadjačati našim pozivom AJAX. Općeniti način za to bi bio:

jQuery.ajax (vrsta: "POST", url: "/wp-admin/admin-ajax.php", // podaci naše datoteke za PHP obradnik: "myDataString", uspjeh: funkcija (rezultati) // napraviti nešto sa vraćeni podaci);

To je osnovna struktura AJAX poziva koji ćemo koristiti, ali sigurno nije jedini način na koji to možete učiniti. Možda se pitate zašto mislimo na to wp-admin ovdje, iako će ovo biti na prednjem dijelu stranice. Ovo je samo mjesto AJAX rukovatelj prebiva, bilo da ga koristite za prednje ili administratorske strane funkcije - zbunjujuće, znam. Zalijepite sljedeći kôd izravno u predložak kupca:

 jQuery ( '# newCustomerForm') podnosi (ajaxSubmit). funkcija ajaxSubmit () var newCustomerForm = jQuery (ovo) .serialize (); jQuery.ajax (vrsta: "POST", url: "/wp-admin/admin-ajax.php", podaci: newCustomerForm, uspjeh: funkcija (podaci) jQuery ("# ​​povratna informacija"). html (podaci); ); vratiti lažno;  

U prvom retku povezujemo našu ajaxSubmit funkciju s oblikom koji smo napravili ranije - pa kad korisnik klikne za prijavu, to ide preko naše posebne AJAX funkcije. Bez toga naš oblik neće učiniti ništa. U našem ajaxSubmit () funkcija, prvo što radimo je da serializiramo () oblik. Ovo jednostavno uzima sve vrijednosti obrasca i pretvara ih u jedan dugi niz koji će naš PHP kasnije razraditi. Ako sve uspije ispravno, vratit ćemo podatke u DIV s idom povratnih informacija.

To je to. Spremite sve, osvježite i pokušajte poslati neke podatke obrasca. Ako imate problema, puni kôd predloška stranice možete pogledati ovdje (na temelju zadane teme dvadeset i jedanaest), i kôd koji ovdje treba dodati funkcijama.php (ne zamijenite, samo dodajte ovo na kraju).

Stvari koje treba imati na umu

sigurnosti: Ovaj kôd nije pripremljen za proizvodnju i namijenjen je samo učenju. Izuzeli smo jednu ključnu točku, a to je upotreba wp-nonce - jednokratnog koda generiranog WordPress-om koji osigurava da AJAX zahtjev dolazi samo od mjesta gdje je bio namijenjen; putovnicu ako hoćete. Bez toga, vašu funkciju možete učinkovito iskoristiti za umetanje slučajnih podataka. SQL injekcijski napadi ipak nisu problem jer smo upite preusmjerili preko WordPress-a $ Wpdb-> umetak funkcija - WordPress čisti sve unose za vas i čini ih sigurnim.

Ažuriranje tablice kupaca: Trenutno šaljemo samo potvrdnu poruku, ali tablica kupaca se ne ažurira - dodatne unose vidjet ćete samo ako osvježite stranicu (koja vrsta poraza je svrha sve to putem AJAX-a). Pogledajte možete li napraviti novu AJAX funkciju koja može dinamički izlaz tablice.

Uvjeravanje ulaza: jer se s podacima obrasca ne provodi provjera valjanosti, zapravo je moguće dodati prazne unose ili više unosa ako previše puta pritisnete. Neke provjere unosa u poljima obrasca, nakon što se ispune, kao i SQL za provjeru adrese e-pošte ili broja telefona koji već ne postoje u bazi podataka bili bi korisni..

To je to od mene ovog tjedna - ako ste imali problema nakon ovog vodiča, slobodno se javite putem komentara i dat ću sve od sebe da vam pomognem; ili ako to pokušavate prilagoditi na neki način, slobodno odbacite ideje od mene. Nadam se da će ovo zaista pokazati koliko možete postići iz WordPress-a jednostavnim kombiniranjem malo JavaScript-a, PHP-a i MySQL-a. Kao i uvijek, ne zaboravite provjeriti sve naše ostale WordPress članke.