Un tutorial despre utilizarea AJAX în WordPress

AJAX este o tehnologie web remarcabilă care ne-a mutat dincolo de simpla “dați clic pe link, accesați altă pagină” structura Internetul 1.0.

AJAX, ceea ce înseamnă Asynchronous Javascript și XML, permite site-urilor să preia dinamic și să afișeze conținut fără ca utilizatorul să se îndepărteze de pagina curentă. Acest lucru conduce la o experiență mult mai interactivă a utilizatorilor și poate accelera lucrurile prea mult, deoarece nu este nevoie să încărcați o pagină Web complet nouă. Din fericire, utilizarea AJAX este destul de ușor de făcut din mediul WordPress, iar astăzi vă voi arăta cum.

Acest tutorial Ajax ar trebui să fie considerat destul de avansat și continuă de la ultima dată când am învățat cum să folosim tabele de baze de date personalizate Lucrul cu tabele de baze de date personalizate în WordPress Lucrul cu tabele de baze de date personalizate în WordPress O scanare rapidă a paginii Best of WordPress Plugins va dezvălui unele dintre cele mai multe modalități unice și de nișă puteți face din blogul dvs. să lucreze mai mult. Dacă aveți deja o bază de date a ... Citește mai mult dintr-un șablon WordPress - în exemplul meu, a fost folosit un simplu tabel existent de date despre clienți. Când vine vorba de inserarea lucrurilor înapoi în baza de date, totuși, vom face uz de o mică magie AJAX în WordPress.

Tot codul din tutorialul de astăzi va fi referindu-se la ceea ce am scris ultima oară, dar dacă sunteți în căutarea de a face cum să faceți AJAX în WordPress atunci este la fel de relevant.

De ce folosiți AJAX?

Cea mai obișnuită utilizare a AJAX este legată de formulare - verificarea dacă un nume de utilizator este luată sau popularea restului formularului cu întrebări diferite, în funcție de răspunsul pe care îl oferiți. Practic, totuși, folosiți AJAX ori de câte ori doriți un eveniment (ca un utilizator care face clic pe ceva, sau tastând ceva) legat de a partea de server acțiune care apare în fundal.

O vom folosi pentru a adăuga noi intrări în tabelul nostru important de baze de date personalizate pentru clienți, dar probabil că puteți veni cu ceva mai interesant.

Prezentare generală a modului de utilizare a AJAX în WordPress

1. Editați șablonul personalizat pentru a include un eveniment de formular sau javascript care va trimite date prin jQuery AJAX la admin-ajax.php inclusiv toate datele de post pe care doriți să le transmiteți. Asigurați-vă că jQuery este încărcat.
2. Definiți o funcție în tema proprie function.php; citiți variabilele post și returnați ceva înapoi utilizatorului dacă doriți.
3. Adăugați un Cârlig de acționare AJAX pentru funcția dvs..

Crearea Formularului

Să începem prin crearea unui simplu formular pe front-end pentru a introduce noi detalii despre clienți. Nu este nimic complicat, înlocuiți doar partea principală a șablonului dvs. personalizat cu acest cod pe care l-am început săptămâna trecută, în jurul căruia apare verificarea is_user_logged_in ():

dacă (is_user_logged_in ()):?> 
 Nume:  E-mail:  Telefon:  Adresa:    
 

 
 

Singurul lucru care ar putea părea ciudat pentru dvs. este că există utilizarea unui câmp de intrare ascuns numit acțiune - aceasta conține numele funcției pe care o vom declanșa prin AJAX.

Receptorul PHP

Apoi, deschide-te functions.php și adăugați următoarea linie pentru a vă asigura că jQuery este încărcat pe site-ul dvs.:

wp_enqueue_script ( 'jquery');

Structura de bază pentru scrierea unui apel AJAX este următoarea:

funcția myFunction () // do something die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Aceste ultimele două linii sunt cârlige de acțiune care spun WordPress “Am o funcție numită "MyFunction" și vreau să le ascultați pentru că va fi apelată prin interfața AJAX” - primul este pentru utilizatorii de nivel administrativ, în timp ce wp_ajax_nopriv_ este pentru utilizatorii care nu sunt conectați. Iată codul complet pentru functions.php pe care o vom folosi pentru a insera datele în tabelul clienților noștri speciali, pe care o voi explica în scurt timp:

wp_enqueue_script ( 'jquery'); funcția addCustomer () global $ wpdb; $ nume = $ _POST ['nume']; $ phone = $ _POST ['telefon']; $ email = $ _POST ['e-mail']; $ adresa = $ _POST ['adresa']; dacă "$ wpdb-> insert ('clienți', array ('name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone) FALSE) echo "Eroare";  altceva echo "Client". $ name. "" adăugat cu succes, ID-ul rândului este ". $ wpdb-> insert_id;  a muri();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nu este cu adevărat necesar

La fel ca înainte, noi declarăm global $ wpdb pentru a ne oferi acces direct la baza de date. Apucăm apoi POST variabile care conțin datele formularului. Înconjurat într-o instrucțiune IF este funcția $ Wpdb-> Inserare, care este ceea ce folosim pentru a introduce datele în tabelul nostru. Din moment ce WordPress oferă funcții specifice pentru introducerea de posturi și meta date obișnuite, acest lucru $ Wpdb-> Inserare metoda este utilizată, în general, numai pentru tabele personalizate. Puteți citi mai multe despre Codul, dar în principiu este nevoie de numele tabelului de inserat, urmat de un mulțime de perechi de coloane / valori.

=== FALSE verifică dacă funcția de inserare a eșuat și, dacă da, ieșire “eroare“. Dacă nu, trimitem un mesaj către utilizator Clientul X a fost adăugat, și ecou $ Wpdb-> insert_id variabilă, care indică variabila automată a incrementului din ultima operație de inserare care sa întâmplat (presupunând că ați setat un câmp care crește automat, ca un ID).

In cele din urma, a muri() va suprascrie valoarea implicită die (0) furnizate de WordPress - aceasta nu este esențială ca atare, dar fără ea o să obțineți 0 atașat la sfârșitul a ceea ce trimiteți înapoi la șablon.

Javascriptul

Ultimul pas este bitul magic - actualul Javascript care va iniția apelul AJAX. Veți observa că în forma pe care am adăugat-o mai devreme, câmpul de acțiune a fost lăsat necompletat. Asta pentru că vom fi de acord cu apelul nostru AJAX. Modul general de a face acest lucru ar fi:

jQuery.ajax (tip: "POST", url: "/wp-admin/admin-ajax.php", // fisierul nostru de fisiere PHP: "myDataString", succes: function (rezultate) // face ceva cu datele returnate);

Aceasta este structura de bază a apelului AJAX pe care îl vom folosi, dar cu siguranță nu este singurul mod în care o puteți face. S-ar putea să te întrebi de ce ne referim wp-admin aici, chiar dacă acest lucru va fi pe front-end al site-ului. Aici este locul unde Handler AJAX locuieste, indiferent daca o folosesti pentru functiile din fata sau ale administratorului - confuz, stiu. Lipiți următorul cod direct în șablonul client:

În prima linie, atașăm funcția ajaxSubmit la formularul pe care l-am făcut mai devreme - așa că atunci când utilizatorul face clic pe trimite, merge prin funcția noastră specială AJAX. Fără aceasta, forma noastră nu va face nimic. În a noastră ajaxSubmit () funcția, primul lucru pe care îl facem este să serializăm () formularul. Acest lucru ia toate formele de formă și le transformă într-un șir lung pe care PHP-ul nostru îl va analiza mai târziu. Dacă totul funcționează corect, vom pune datele returnate în DIV cu ID-ul de feedback.

Asta e. Salvați totul, reîmprospătați și încercați să trimiteți date de formă. Dacă aveți probleme, puteți vedea aici codul complet al șablonului de pagină (bazat pe implicit douăzeci și unsprezece temă), și codul de adăugat la funcțiile.php aici (nu înlocuiți, doar adăugați acest lucru la sfârșit).

Lucruri de ținut minte

Securitate: Acest cod nu este pregătit pentru producție și este doar pentru scopuri de învățare. Am lăsat un punct cheie, și asta este utilizarea unui wp-nonce - un cod unic generat de WordPress care asigură că cererea AJAX vine doar de unde a fost destinat; un passkey dacă vrei. Fără aceasta, funcția dvs. ar putea fi efectiv exploatată pentru a introduce date aleatorii. Atacurile de injecție SQL nu sunt o problemă, totuși, pentru că am rutat interogări prin WordPress $ Wpdb-> Inserare funcția - WordPress curăță toate intrările pentru dvs. și le face în siguranță.

Actualizarea tabelului de clienți: În momentul de față, trimitem doar un mesaj de confirmare, dar tabelul clienților nu se actualizează - veți vedea numai intrările suplimentare dacă actualizați pagina (care fel de învinge scopul de a face acest lucru toate prin intermediul AJAX). Vedeți dacă puteți crea o nouă funcție AJAX care să poată scoate dinamic masa.

Validarea intrărilor: deoarece nu există o validare care să se întâmple cu datele formularului, este posibil să adăugați intrări goale sau mai multe intrări dacă apăsați de prea multe ori. Unele validări de intrare în câmpurile de formular, ștergerea acestora la finalizare, precum și SQL pentru a verifica e-mailul sau numărul de telefon care nu există deja în baza de date ar fi utile.

Asta este de la mine în această săptămână - dacă ați avut probleme în urma acestui tutorial apoi nu ezitați să intrați în legătură prin intermediul comentariilor și voi face tot posibilul pentru a vă ajuta; sau dacă încercați să personalizați acest lucru într-un fel, nu ezitați să renunțați la idei. Sper că acest lucru merge cu adevărat pentru a arăta cât de mult puteți face din WordPress pur și simplu prin combinarea unui pic JavaScript, PHP și MySQL. Ca întotdeauna, nu uitați să verificați toate celelalte articole WordPress.

Explorați mai multe despre: Programare, Instrumente pentru webmasteri, Wordpress.