Apmācība par AJAX izmantošanu WordPress

Reklāma

AJAX ir ievērojama tīmekļa tehnoloģija, kas mūs aizveda ārpus vienkāršā “noklikšķiniet uz saites, dodieties uz citu lapuStruktūra Internets 1.0.

AJAX, kas apzīmē Asinhronā Javascript un XML, ļauj vietnēm dinamiski ielādēt un parādīt saturu, lietotājam nenovirzoties no pašreizējās lapas. Tas rada daudz interaktīvāku lietotāju pieredzi un var arī paātrināt šo darbību, jo nav jāielādē pilnīgi jauna tīmekļa lapa. Par laimi AJAX izmantošanu ir diezgan viegli izdarīt WordPress vidē, un šodien es jums parādīšu, kā.

Šī Ajax apmācība jāuzskata par diezgan progresīvu, un tā turpināsies no pēdējās reizes, kad uzzinājām kā izmantot pielāgotas datu bāzes tabulas Darbs ar pielāgotajām datu bāzu tabulām programmā WordPressLapas Best of WordPress spraudņi ātra skenēšana atklās dažus no daudzajiem unikālajiem un nišas veidiem, kā padarīt emuāru grūtāku. Ko darīt, ja jums jau ir datu bāze ... Lasīt vairāk no WordPress veidnes - manā piemērā tika izmantota vienkārša esoša klientu datu tabula. Tomēr, runājot par lietu ievietošanu atpakaļ datu bāzē, mēs izmantosim nelielu AJAX maģiju WordPress.

Tāpēc viss šodienas apmācības kods atsaucas uz to, ko mēs rakstījām pagājušajā reizē, bet, ja jūs tikai meklējat, kā AJAX darīt WordPress, tad tas ir tikpat būtisks.

Kāpēc izvēlēties AJAX?

Visbiežāk AJAX lietošana ir saistīta ar formām - pārbaudot, vai tiek ņemts lietotājvārds, vai pārējās formas aizpildīšana ar dažādiem jautājumiem atkarībā no konkrētās sniegtās atbildes. Tomēr būtībā jūs izmantojat AJAX ikreiz, kad vēlaties notikumu (piemēram, lietotājam kaut kam noklikšķinot vai kaut ko ierakstot) piesaistīts a servera puse darbība, kas notiek fons.

Mēs to izmantosim, lai pievienotu jaunus ierakstus mūsu svarīgajā pielāgotajā klientu datu bāzes tabulā, taču jūs, iespējams, varat nākt klajā ar kaut ko aizraujošāku.

Pārskats par AJAX izmantošanu WordPress

1. Rediģējiet savu pielāgoto veidni, lai iekļautu formu vai javascript notikumu, kas datus iesniegs, izmantojot jQuery AJAX admin-ajax.php ieskaitot visus ziņas, kuras vēlaties ievadīt. Pārliecinieties, ka jQuery tiek ielādēts.
2. Definējiet funkciju motīvā funkcija.php; lasiet ziņas mainīgos un, ja vēlaties, kaut ko atgrieziet lietotājam.
3. Pievienojiet AJAX darbības āķis savai funkcijai.

Veidlapas izveidošana

Sāksim ar priekšplāna vienkāršas veidlapas izveidi, lai ievadītu jaunu klientu informāciju. Tas nav nekas sarežģīts, vienkārši nomainiet pielāgotās veidnes galveno daļu ar šo kodu, kuru mēs sākām pagājušajā nedēļā, turpat, kur notiek is_user_logged_in () pārbaude:

if (is_user_logged_in ()):?> 

Vārds:E-pasts:Tālrunis:Adrese:

Vienīgais, kas jums varētu šķist dīvaini, ir tas, ka tiek izmantots slēpts ievades lauks ar nosaukumu darbība - tas satur tās funkcijas nosaukumu, kuru mēs aktivizēsim, izmantojot AJAX.

PHP uztvērējs

Tālāk atveriet funkcijas.php un pievienojiet šo rindu, lai nodrošinātu jQuery ielādi jūsu vietnē:

wp_enqueue_script ('jquery');

AJAX zvana rakstīšanas pamatstruktūra ir šāda:

funkcija myFunction () { //dari kaut ko. mirst (); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Šīs pēdējās divas līnijas ir darbības āķi, kas stāsta WordPress “Man ir funkcija myFunction, un es vēlos, lai jūs to klausītos, jo tā tiks izsaukta caur AJAX saskarni.” Pirmais ir paredzēts administratora līmeņa lietotājiem, savukārt wp_ajax_nopriv_ ir paredzēts lietotājiem, kuri nav pieteikušies. Šeit ir pilns vietnes kods funkcijas.php ko mēs izmantosim, lai ievietotu datus mūsu speciālajā klientu tabulā, ko es drīz paskaidrošu:

wp_enqueue_script ('jquery'); funkcija addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ tālrunis = $ _POST ['tālrunis']; $ e-pasts = $ _POST ['e-pasts']; $ adrese = $ _POST ['adrese']; if ($ wpdb-> insert ('klienti', masīvs ( 'nosaukums' => $ nosaukums, 'e-pasts' => $ e-pasts, 'adrese' => $ adrese, 'tālrunis' => $ tālrunis. )) FALSE) {echo "Kļūda"; } cits { atbalss "Klients". $ nosaukums. "'veiksmīgi pievienots, rindas ID ir". $ wpdb-> insert_id; } mirst (); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nav īsti vajadzīgs

Tāpat kā iepriekš, mēs deklarējam globālais $ wpdb lai dotu mums tiešu piekļuvi datu bāzei. Pēc tam mēs satveram POST mainīgie, kas satur veidlapas datus. IF paziņojuma ieskauta ir funkcija $ wpdb-> ievietot, ko mēs izmantojam, lai datus ievietotu mūsu tabulā. Tā kā WordPress nodrošina īpašas funkcijas parasto ziņu un meta datu ievietošanai, tas $ wpdb-> ievietot metodi parasti izmanto tikai pielāgotajām tabulām. Jūs varat lasīt vairāk par to Kodeksā, bet pamatā tas prasa tabulas nosaukumu, kas jāievieto, kam seko simbols masīvs no kolonnu / vērtību pāri.

FALSE pārbauda, ​​vai ievietošanas funkcija neizdevās, un ja tā, tā izvada “kļūda“. Ja nē, mēs vienkārši nosūtām tam ziņojumu Klients X tika pievienotsun atbalsojas $ wpdb-> insert_id mainīgais, kas norāda automātiskā pieauguma mainīgais no pēdējās ievietošanas operācijas, kas notika (pieņemot, ka esat iestatījis lauku, kas automātiski palielinās, piemēram, ID).

Visbeidzot nomirt () ignorēs noklusējuma iestatījumus nomirt (0) nodrošina WordPress - tas pats par sevi nav būtisks, bet bez tā jūs iegūsit 0 tā beigās, kas tiek nosūtīts atpakaļ veidnei.

Javascript

Pēdējais solis ir maģiskais bits - faktiskais Javascript, kas iniciēs AJAX zvanu. Jūs pamanīsit, ka formā, kuru mēs pievienojām iepriekš, darbības lauks bija atstāts tukšs. Tas ir tāpēc, ka mēs to ignorēsim ar mūsu AJAX zvanu. Parasti to var izdarīt šādi:

jQuery.ajax ({tips: "POST", URL: "/wp-admin/admin-ajax.php", // mūsu PHP apstrādātāja faila dati: "myDataString", panākumi: funkcija (rezultāti) {// dari kaut ko ar atgriezti dati})};

Tā ir AJAX zvana pamata struktūra, kuru mēs izmantosim, taču tas noteikti nav vienīgais veids, kā jūs to varat izdarīt. Jums varētu rasties jautājums, kāpēc mēs to domājam wp-admin šeit, kaut arī tas atradīsies vietnes priekšpusē. Tas ir tikai tur, kur AJAX apdarinātājs dzīvo neatkarīgi no tā, vai jūs to izmantojat priekšējās vai administratora puses funkcijām - mulsinošs, es zinu. Ielīmējiet šo kodu tieši klienta veidnē:

Pirmajā rindā mēs pievienojam mūsu ajaxSubmit funkciju iepriekš veidotajai formai - tātad, kad lietotājs noklikšķina uz iesniegšanas, tā tiek izmantota caur mūsu speciālo AJAX funkciju. Bez tā mūsu forma neko nedarīs. Mūsu ajaxSubmit () funkcija, pirmais, ko mēs darām, ir serializēt () forma. Tas vienkārši ņem visas formas vērtības un pārvērš tās vienā garā virknē, kuru mūsu PHP vēlāk parsēs. Ja tas viss izdosies pareizi, atgrieztos datus mēs ievietosim DIV ar atgriezeniskās saites ID.

Tieši tā. Saglabājiet visu, atsvaidziniet un mēģiniet iesniegt dažus veidlapas datus. Ja jums rodas problēmas, varat to apskatīt pilns lapas veidnes kods šeit (pamatojoties uz noklusējuma divdesmit vienpadsmit tēmu), un kodu, kas jāpievieno funkcijas.php šeit(neaizstājiet, vienkārši pievienojiet to beigās).

Lietas, kas jāpatur prātā

Drošība: Šis kods nav gatavs ražošanai un ir paredzēts tikai mācībām. Mēs esam izlaiduši vienu galveno punktu, un tas ir a wp-nonce - WordPress ģenerēts vienreizējs kods, kas nodrošina, ka AJAX pieprasījums tiek piegādāts tikai tur, kur tas bija paredzēts; piekļuves atslēga, ja vēlaties. Bez tā jūsu funkciju varētu efektīvi izmantot, lai ievietotu nejaušus datus. SQL injekcijas uzbrukumi tomēr nav problēma, jo vaicājumus mēs virzījām caur WordPress $ wpdb-> ievietot funkcija - WordPress notīra visus ievadītos datus un padara tos drošus.

Klientu tabulas atjaunināšana: Pašlaik mēs sūtām tikai apstiprinājuma ziņojumu, bet klientu tabula netiek atjaunināta - papildu ierakstus redzēsit tikai tad, ja atsvaidzināsit lapu. (kas ir pretrunā ar mērķi to visu paveikt, izmantojot AJAX). Noskaidrojiet, vai varat izveidot jaunu AJAX funkciju, kas var dinamiski izvadīt tabulu.

Ievades validācija: tā kā ar veidlapas datiem netiek veikta pārbaude, faktiski ir iespējams pievienot tukšus ierakstus vai vairākus ierakstus, ja nospiedīsit pārāk daudzas reizes. Būtu noderīgi veikt dažus ievades apstiprinājumus veidlapas laukos, notīrīt tos pēc aizpildīšanas, kā arī SQL, lai pārbaudītu e-pasta vai tālruņa numuru, kas vēl nav datu bāzē.

Tas ir no manis šonedēļ - ja jums ir radušās problēmas pēc šīs apmācības, sazinieties ar komentāriem un es darīšu visu iespējamo, lai jums palīdzētu; vai, ja jūs kaut kādā veidā mēģināt to pielāgot, nekautrējieties atmest idejas no manis. Es ceru, ka tas patiešām parādīs, cik daudz jūs varat darīt no WordPress, vienkārši apvienojot nedaudz JavaScript, PHP un MySQL. Kā vienmēr, neaizmirstiet pārbaudīt visus pārējos WordPress raksti.