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

Oglas

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, omogućava web lokacijama da dinamično dohvaćaju i prikazuju sadržaj 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 potpuno nova web stranica. Srećom, korištenje AJAX-a vrlo je jednostavno u WordPress okruženju, a danas ću vam pokazati kako.

Ovaj Ajax udžbenik treba smatrati prilično naprednim i nastavlja se od posljednjeg vremena gdje smo saznali kako koristiti prilagođene tablice baze podataka Rad s tablicama prilagođenih baza podataka u WordPressuBrzo skeniranje stranice Best of WordPress Plugins otkrit ć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 ... Čitaj više unutar WordPress predloška - u mom primjeru korištena je jednostavna postojeća tablica podataka o klijentima. Kad je riječ o umetanju stvari natrag u bazu podataka, koristit ćemo malo AJAX magije 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?

Najčešća upotreba AJAX-a odnosi se na obrasce - provjeravanje da li se koristi korisničko ime ili ostatak obrasca punjenje 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 prilagođenu tablicu baza podataka, 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 postu koji želite poslati. Obavezno se učitava jQuery.
2. Definirajte funkciju u temi teme 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. Nije ništa komplicirano, samo zamijenite glavni dio vašeg prilagođenog predloška s ovim kodom koji smo započeli prošlog tjedna, tamo gdje se događa provjera is_user_logged_in ():

if (is_user_logged_in ()):?> 

Ime:E-mail:Telefon:Adresa:

Jedino što bi vam moglo izgledati čudno jest uporaba skrivenog polja za unos 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 pisanja AJAX poziva je sljedeća:

funkcija myFunction () { //učini nešto. umrijeti(); } dodavanje ('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. Ž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 vam ukratko objasniti:

wp_enqueue_script ( 'jquery'); funkcija addCustomer () {globalni $ wpdb; $ name = $ _POST ['ime']; $ phone = $ _POST ['telefon']; $ email = $ _POST ['email']; $ adresa = $ _POST ['adresa']; ako ($ wpdb-> Umetni ( "kupaca, matrica ( 'ime' => $ ime, 'email' => $ email, 'adresa' => $ adresa, 'telefon' => $ telefon. )) FALSE) {echo "Greška"; } drugo { odjekuje "mušterija". $ name. "'uspješno dodan, ID retka je". $ wpdb-> insert_id; } umrijeti(); } dodavanje ('wp_ajax_addCustomer', 'addCustomer'); dodavanje ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nije baš potreban

Baš kao i prije, deklarirali smo 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 je $ Wpdb-> umetak metoda se uglavnom koristi samo za prilagođene tablice. Možeš pročitajte više o tome na Codexu, ali u osnovi je potrebno unijeti naziv tablice, nakon čega slijedi an red od parovi stupaca / vrijednosti.

NETOČNO provjerava da li funkcija umetanja nije uspjela, i ako je tako, izlazi „greška“. U suprotnom, korisniku samo šaljemo poruku Korisnik X je dodani odjekuje $ Wpdb-> insert_id varijabla, koja označava varijabla automatskog povećanja 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 umrijeti (0) koju pruža WordPress - to nije bitno kao takvo, ali bez njega ćete to morati 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 prazno. To je zato što ćemo to nadjačati svojim 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 mi to mislimo wp-admin ovdje, iako će ovo biti na prednjem kraju stranice. Ovo je mjesto gdje AJAX rukovatelj prebiva, bilo da ga upotrebljavate za prednje ili administratorske strane funkcije - zbunjujuće, znam. Zalijepite sljedeći kôd izravno u predložak kupca:

U prvom retku povezujemo našu ajaxSubmit funkciju s oblikom koji smo napravili ranije - pa kada korisnik klikne za prijavu, to ide putem naše posebne AJAX funkcije. Bez toga naš oblik neće učiniti ništa. U našem ajaxSubmit () funkcija, prvo što radimo je serijalizacija () oblik. Ovo jednostavno uzima sve vrijednosti obrasca i pretvara ih u jedan dugi niz koji će naš PHP kasnije raščlaniti. Ako se sve pokaže kako treba, vratit ćemo podatke u DIV s id-om povratnih informacija.

To je to. Spremite sve, osvježite i pokušajte poslati neke podatke obrasca. Ako imate problema, možete je pregledati ovdje se nalazi cijeli kôd predloška stranice (na temelju zadane teme dvadeset i jedanaest), i kôd koji treba dodati function.php ovdje(nemojte zamijeniti, dodajte ovo na kraju).

Stvari koje treba imati na umu

sigurnosti: Ovaj kôd nije pripremljen za proizvodnju i namijenjen je samo učenju. Ostavili smo jednu ključnu točku, a to je upotreba a wp-nPo - jednokratni kôd generiran od WordPress-a 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 ispisati tablicu.

Uvjeravanje ulaza: budući da se ne vrši provjera podataka s podacima obrasca, zapravo je moguće dodati prazne ili više unosa ako previše puta pritisnete. Bilo bi korisno unos provjere u poljima obrasca, nakon što ih očistite, kao i SQL za provjeru adrese e-pošte ili broja telefona koji već ne postoje u bazi podataka.

To je to od mene ovog tjedna - ako ste imali problema nakon ovog vodiča, slobodno se javite putem komentara i učinit ć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 druge Članci u WordPressu.