Reklaam
AJAX on tähelepanuväärne veebitehnoloogia, mis viis meid kaugemale lihtsast „klõpsake lingil, minge teisele lehele"Struktuur Internet 1.0.
AJAX, mis tähistab Asünkroonne Javascript ja XML, võimaldab veebisaitidel sisu dünaamiliselt tõmmata ja kuvada, ilma et kasutaja praegusest lehest kaugeneks. See annab palju interaktiivsema kasutajakogemuse ja võib asja ka kiirendada, kuna tervet uut veebilehte ei pea laadima. Õnneks on AJAX-i kasutamist WordPressi keskkonnas üsna lihtne teha ja täna näitan teile, kuidas seda teha.
Seda Ajaxi õpetust tuleks pidada üsna edasijõudnuks ja see jätkub eelmisest korrast, kus õppisime kuidas kasutada kohandatud andmebaasi tabeleid Töö kohandatud andmebaasi tabelitega WordPressisParima WordPressi pistikprogrammide lehe kiire skannimine näitab mõnda paljudest ainulaadsetest ja nišilistest viisidest, kuidas saate oma ajaveebi töö raskemaks muuta. Mis siis, kui teil on juba andmebaas ... Loe rohkem WordPressi malli seest - minu näites kasutati lihtsat olemasolevat kliendiandmete tabelit. Kui asi puudutab asjade andmebaasi lisamist, siis kasutame WordPressis väikest AJAX-i võlu.
Seetõttu viitab kogu tänase õppematerjali kood sellele, mida me eelmine kord kirjutasime, kuid kui otsite lihtsalt, kuidas AJAX-i WordPressis teha, on see sama asjakohane.
Miks kasutada AJAX-i?
AJAX-i kõige levinum kasutamine on seotud vormidega - kasutajanime võtmise kontrollimisega või ülejäänud vormi täitmisega erinevate küsimustega sõltuvalt konkreetsest vastusest, mille annate. Põhimõtteliselt kasutate AJAX-i alati, kui soovite sündmust (nagu kasutaja klõpsab midagi või kirjutab midagi) seotud a serveripoolne toiming, mis toimub taust.
Kavatseme seda kasutada uute kirjete lisamiseks meie olulisse kohandatud klientide andmebaasi tabelisse, kuid tõenäoliselt võite tulla midagi põnevamat.
Ülevaade AJAX-i kasutamisest WordPressis
- Muutke oma kohandatud malli, et lisada vorm või javascripti sündmus, mis edastab andmeid jQuery AJAX-i kaudu admin-ajax.php sealhulgas kõik postiandmed, mida soovite edastada. Veenduge, et jQuery oleks laaditud.
- Määrake oma teema funktsioon funktsioon.php; loe postimuutujaid ja soovi korral anna kasutajale midagi tagasi.
- Lisage AJAX tegevuskonks oma funktsiooni jaoks.
Vormi loomine
Alustame uue kliendi üksikasjade sisestamiseks kasutajaliidese lihtsa vormi loomisega. See pole midagi keerukat, lihtsalt asendage oma kohandatud malli põhiosa selle koodiga, mida alustasime eelmisel nädalal, kus toimub is_user_logged_in () kontroll:
if (is_user_logged_in ()):?>
Ainus asi, mis võib teile veider tunduda, on see, et kasutatakse peidetud sisestusvälja, mida nimetatakse tegevus - see sisaldab funktsiooni nime, mille me AJAX-i kaudu käivitame.
PHP vastuvõtja
Järgmisena avage funktsioonid.php ja lisage järgmine rida, et tagada jQuery laadimine teie saidile:
wp_enqueue_script ('jquery');
AJAX-kõne kirjutamise põhistruktuur on järgmine:
funktsioon myFunction () { //tee midagi. surema (); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');
Need kaks viimast rida on tegevuskonksud, mis räägivad WordPressist "Mul on funktsioon nimega myFunction ja ma tahan, et te seda kuulaksite, kuna sellele helistatakse AJAX-i liidese kaudu" - esimene on mõeldud administraatori tasemel kasutajatele, samas wp_ajax_nopriv_ on kasutajatele, kes pole sisse logitud. Siin on täielik kood funktsioonid.php mida me kasutame andmete lisamiseks meie eriklientide tabelisse, mida selgitan varsti:
wp_enqueue_script ('jquery'); funktsioon addCustomer () {global $ wpdb; $ nimi = $ _POST ['nimi']; $ telefon = $ _POST ['telefon']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ('kliendid', massiiv ( 'nimi' => $ nimi, 'email' => $ email, 'address' => $ address, 'telefon' => $ telefon. )) VIGA) {kaja "Viga"; } veel { kaja "klient". $ nimi. "'edukalt lisatud, rea ID on". $ wpdb-> insert_id; } surema (); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // pole tegelikult vaja
Nii nagu varem, kuulutame välja globaalne $ wpdb et anda meile otsene juurdepääs andmebaasile. Haarame siis POST muutujad, mis sisaldavad vormi andmeid. IF-väitega ümbritsetud funktsioon $ wpdb-> sisesta, mida me andmete tabelisse lisamiseks kasutame. Kuna WordPress pakub tavaliste postituste ja metaandmete sisestamiseks spetsiifilisi funktsioone, siis see $ wpdb-> sisesta meetodit kasutatakse tavaliselt ainult kohandatud tabelite jaoks. Sa saad loe selle kohta koodeksist lähemalt, kuid põhimõtteliselt võtab see sisestatava tabeli nime, millele järgneb massiiv of veeru / väärtuse paarid.
VABA kontrollib, kas sisestusfunktsioon ebaõnnestus, ja kui jah, siis väljastatakse see „viga“. Kui ei, saadame kasutajale lihtsalt sellekohase sõnumi Klient X lisatija kajavad $ wpdb-> insert_id muutuja, mis tähistab automaatse juurdekasvu muutuja viimasest sisestatud operatsioonist (eeldusel, et olete määranud välja, mida automaatselt suurendatakse, näiteks ID).
Lõpuks surema () alistab vaikesätte surema (0) pakub WordPress - see pole iseenesest oluline, kuid ilma selleta te ei kavatse 0 mis on lisatud mallile tagasi saadetava teabe lõppu.
Javascript
Viimane samm on võluvägi - tegelik Javascript, mis algatab AJAX-kõne. Võite märgata, et varem lisatud kujul jäeti tegevusväli tühjaks. Selle põhjuseks on see, et me ületame seda oma AJAX-kõnega. Üldine viis selleks on:
jQuery.ajax ({tüüp: "POST", URL: "/wp-admin/admin-ajax.php", // meie PHP-töötleja faili andmed: "myDataString", edu: funktsioon (tulemused) {// tehke midagi koos tagastatud andmed})};
See on meie kasutatava AJAX-kõne põhistruktuur, kuid kindlasti mitte ainus viis, kuidas seda teha. Teil võib tekkida küsimus, miks me sellele viitame wp-admin siin, isegi kui see toimub saidi esiotsa. Just siin AJAX-käitleja olenemata sellest, kas kasutate seda esi- või administraatori külgfunktsioonide jaoks - segadust tekitav, ma tean. Kleepige järgmine kood otse kliendimalli:
Esimeses reas kinnitame oma ajaxSubmit funktsiooni varem tehtud vormile - nii et kui kasutaja klõpsab esitamisel, läheb see meie spetsiaalse AJAX-funktsiooni kaudu. Ilma selleta ei tee meie vorm midagi. Meie ajaxSubmit () esimene asi, mida me teeme järjestama () vorm. See võtab lihtsalt kõik vormiväärtused ja muudab need üheks pikaks stringiks, mille meie PHP hiljem sõelub. Kui kõik õnnestub, paneme tagastatud andmed DIV-i koos tagasiside ID-ga.
See selleks. Salvestage kõik, värskendage ja proovige vormi andmeid edastada. Kui teil on probleeme, saate vaadata lehe malli täielik kood siin (põhineb vaikimisi 21-teemalisel teemal)ja kood, millele lisada funktsioonid.php siin(ärge asendage, lisage see lihtsalt lõppu).
Asjad, mida tuleks meeles pidada
Turvalisus: See kood ei ole tootmiseks valmis ja see on mõeldud ainult õppimiseks. Oleme jätnud ühe põhipunkti välja ja selleks on a kasutamine wp-nonce - WordPressi loodud ühekordne kood, mis tagab, et AJAX päring tuleb ainult sealt, kus see oli ette nähtud; pääsukood, kui soovite. Ilma selleta saaks teie funktsiooni tõhusalt ära kasutada juhuslike andmete sisestamiseks. SQL-i süstimisrünnakud pole siiski probleem, kuna suunasime päringuid WordPressi kaudu $ wpdb-> sisesta funktsioon - WordPress puhastab teie jaoks kõik sisendid ja muudab need turvaliseks.
Klientide tabeli värskendamine: Praegu saadame tagasi ainult kinnitussõnumi, kuid klientide tabelit ei värskendata - lisakirjeid näete ainult siis, kui värskendate lehte (mis nurjub eesmärgiga seda kõike AJAX-i kaudu teha). Vaadake, kas saate teha uue funktsiooni AJAX, mis suudab tabelit dünaamiliselt väljastada.
Sisendi valideerimine: kuna vormi andmetega valideerimist ei toimu, on tegelikult liiga tühja vajutamise korral võimalik lisada tühje kandeid või mitu kannet. Kasulik oleks mõni vormiväljade sisestusvalideerimine, nende tühjendamine pärast täitmist, samuti SQL e-posti või telefoninumbri kontrollimiseks, mida andmebaasis veel pole.
See on minu enda poolt sellel nädalal - kui teil oli selle õppematerjali järgimisega probleeme, võtke julgesti ühendust kommentaaride kaudu ja annan endast parima, et teid aidata; või kui proovite seda mingil moel kohandada, siis põgenege ideede eest. Loodan, et see näitab tõesti seda, kui palju saate WordPressis ära teha, lihtsalt natuke JavaScripti, PHP ja MySQL ühendades. Nagu ikka, ärge unustage vaadata kõiki meie teisi WordPressi artiklid.
Jamesil on tehisintellekti BSc ning ta on CompTIA A + ja Network + sertifikaadiga. Ta on MakeUseOfi juhtiv arendaja ja veedab oma vaba aega VR-i paintballi ja lauamänge mängides. Ta on lapsest peale arvutit ehitanud.