En opplæring om bruk av AJAX i WordPress

AJAX er en bemerkelsesverdig webteknologi som flyttet oss utover det enkle “klikk lenke, gå til en annen side” struktur av Internett 1.0.

AJAX, som står for Asynkron Javascript og XML, gjør det mulig for nettsteder å dynamisk hente og vise innhold uten at brukeren flytter vekk fra gjeldende side. Dette fører til en langt mer interaktiv brukeropplevelse, og kan øke hastigheten også siden en helt ny nettside ikke trenger å lastes inn. Heldigvis er det ganske enkelt å gjøre bruk av AJAX fra WordPress-miljøet, og i dag skal jeg vise deg hvordan.

Denne Ajax-opplæringen bør betraktes som ganske avansert og fortsetter videre fra siste gang vi lærte hvordan du bruker egendefinerte databasetabeller. Arbeide med egendefinerte databasetabeller I WordPress Arbeide med egendefinerte databasetabeller I WordPress En rask skanning av den beste av WordPress-plugin-siden vil avsløre Noen av de mange unike og nisje-måtene du kan gjøre bloggen din hardere. Hva om du allerede har en database av ... Les mer fra en WordPress-mal - i mitt eksempel ble det brukt en enkel eksisterende tabell med kundedata. Når det gjelder å sette inn ting tilbake i databasen skjønt, skal vi gjøre bruk av en liten AJAX-magi innenfor WordPress.

All koden i dagens veiledning vil derfor referere til hva vi skrev sist, men hvis du bare leter etter hvordan du gjør AJAX i WordPress, er det like viktig.

Hvorfor bruke AJAX?

Den vanligste bruken av AJAX er relatert til skjemaer - Kontroller om brukernavn er tatt, eller fyller resten av skjemaet med forskjellige spørsmål avhengig av et bestemt svar du gir. I utgangspunktet bruker du AJAX når du vil ha en hendelse (som en bruker å klikke på noe eller skrive noe) bundet til a tjenersiden handling som skjer i bakgrunn.

Vi skal bruke den til å legge til nye oppføringer i vår viktige tilpassede kundedatabase, men du kan nok komme opp med noe mer spennende.

Oversikt over hvordan du bruker AJAX i WordPress

1. Rediger din egendefinerte mal for å inkludere et skjema eller javascript-event som sender inn data via jQuery AJAX til admin-ajax.php inkludert hvilken postdata du vil passere inn. Kontroller at jQuery er lastet inn.
2. Definer en funksjon i temaet ditt function.php; les postvariabler, og returner noe tilbake til brukeren hvis du ønsker det.
3. Legg til en AJAX action krok for din funksjon.

Opprette skjemaet

La oss begynne med å lage en enkel skjema på forsiden for å skrive inn nye kundedetaljer. Det er ikke noe komplisert, bare erstatt hoveddelen av din egendefinerte mal med denne koden som vi startet forrige uke, rundt der is_user_logged_in () sjekken skjer:

hvis (is_user_logged_in ()):?> 
 Navn:  e-post:  telefon:  Adresse:    
 

 
 

Det eneste som kan se ut som du er, er at det er bruk av et skjult inntastingsfelt som heter handling - Dette inneholder navnet på funksjonen vi utløser via AJAX.

PHP mottakeren

Deretter åpner du opp functions.php og legg til følgende linje for å sikre at jQuery lastes på nettstedet ditt:

wp_enqueue_script ( 'jquery');

Grunnstrukturen for å skrive et AJAX-anrop er som følger:

funksjon myFunction () // gjør noe dø ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

De to siste linjene er handlekroker som forteller WordPress “Jeg har en funksjon kalt myFunction, og jeg vil at du skal høre på det fordi det skal kalles via AJAX-grensesnittet” - den første er for admin nivå brukere, mens wp_ajax_nopriv_ er for brukere som ikke er logget inn. Her er den komplette koden for functions.php som vi skal bruke til å sette inn data i vårt spesialkunderbord, som jeg skal forklare kort tid:

wp_enqueue_script ( 'jquery'); funksjon addCustomer () global $ wpdb; $ name = $ _POST ['name']; $ telefon = $ _POST ['telefon']; $ email = $ _POST ['email']; $ adresse = $ _POST ['adresse']; hvis ($ wpdb-> insert ('kunder', array ('navn' => $ navn, 'email' => $ email, 'adresse' => $ adresse, 'telefon' => $ telefon)) === FALSE) echo "Error";  else echo "Customer" ". $ navn. "'vellykket lagt til, rad-ID er". $ wpdb-> insert_id;  dø ();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // egentlig ikke nødvendig

Akkurat som før erklærer vi global $ wpdb å gi oss direkte tilgang til databasen. Vi tar da tak i POST variabler som inneholder skjemadataene. Omgitt i en IF-setning er funksjonen $ Wpdb-> innsats, som er det vi bruker til å sette inn data i vårt bord. Siden WordPress gir spesifikke funksjoner for å sette inn vanlige innlegg og metadata, dette $ Wpdb-> innsats Metoden brukes vanligvis kun til tilpassede tabeller. Du kan lese mer om det på Codex, men i utgangspunktet tar det navnet på bordet som skal settes inn i, etterfulgt av en matrise av kolonne / verdi par.

De === FALSE sjekker for å se om innsatsfunksjonen mislyktes, og i så fall utsender den “feil“. Hvis ikke, sender vi bare en melding til brukeren som Kunde X ble lagt til, og ekko på $ Wpdb-> insert_id variabel, som indikerer automatisk stigningsvariabel av den siste innsatsen som skjedde (forutsatt at du har angitt et felt som automatisk øker, som en ID).

Endelig, dø() vil overstyre standardinnstillingen dø (0) levert av WordPress - dette er ikke viktig som sådan, men uten det du kommer til å få 0 vedlagt til slutten av alt du sender tilbake til malen.

Javascript

Det siste trinnet er den magiske biten - den faktiske Javascript som vil starte AJAX-samtalen. Du vil legge merke til at i skjemaet vi la til tidligere, ble handlingsfeltet tomt. Det er fordi vi overstyrer dette med vårt AJAX-anrop. Den generelle måten å gjøre dette på ville være:

jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", // vår PHP-håndteringsfildata: "myDataString", suksess: funksjon (resultater) // gjør noe med returnerte data);

Det er den grunnleggende strukturen til AJAX-samtalen vi skal bruke, men absolutt ikke den eneste måten du kan gjøre det på. Du lurer kanskje på hvorfor vi refererer til wp-admin her, selv om dette vil være på forsiden av nettstedet. Dette er bare hvor AJAX-handler Bor, enten du bruker den til front- eller admin sidefunksjoner - forvirrende, jeg vet det. Lim inn følgende kode direkte i kundemalen:

I den første linjen legger vi sammen vår ajaxSubmit-funksjon til skjemaet vi laget tidligere - så når brukeren klikker, sender den via vår spesielle AJAX-funksjon. Uten dette vil vårt skjema ikke gjøre noe. I vår ajaxSubmit () funksjon, det første vi gjør er å serialisere () skjemaet. Dette tar bare alle formverdiene, og gjør dem til en lang streng som vår PHP vil parse ut senere. Hvis alt fungerer bra, legger vi de returnerte dataene inn i DIV med tilbakemeldingens ID.

Det er det. Lagre alt, oppdater og prøv å sende inn noen skjemadata. Hvis du har problemer, kan du se hele koden til sidemalen her (basert på standard tjue elleve tema), og koden som skal legges til functions.php her (ikke erstatt, legg bare til dette på slutten).

Ting å huske på

Sikkerhet: Denne koden er ikke produksjonsklar og er kun ment som læring. Vi har utelatt ett sentralt punkt, og det er bruken av en wp-nonce - en engangskode generert av WordPress som sikrer at AJAX-forespørselen bare kommer fra hvor den var beregnet. en passord hvis du vil. Uten det kan din funksjon effektivt utnyttes for å sette inn tilfeldige data. SQL-injeksjonsangrep er ikke et problem, men fordi vi dirigerte spørringer gjennom WordPress $ Wpdb-> innsats funksjon - WordPress renser eventuelle innganger for deg og gjør dem trygge.

Oppdaterer bordet til kunder: Foreløpig sender vi kun en bekreftelsesmelding tilbake, men kundetabellen blir ikke oppdatert. Du ser bare de ekstra oppføringene hvis du oppdaterer siden (hvilken slags beseirer formålet med å gjøre alt dette via AJAX). Se om du kan lage en ny AJAX-funksjon som kan utføre bordet dynamisk.

Inngangsvalidering: fordi det ikke er noen validering som skjer med skjemadataene, er det faktisk mulig å legge til tomme oppføringer, eller flere oppføringer hvis du trykker for mange ganger. Noen inntastings validering på skjemafeltene, fjerner dem når de er ferdig, og også SQL for å sjekke e-post eller telefonnummer som ikke allerede finnes i databasen, ville være nyttig.

Det er det fra meg denne uken - hvis du har hatt problemer med å følge denne opplæringen, er du velkommen til å komme i kontakt via kommentarene og jeg vil gjøre mitt beste for å hjelpe deg; eller hvis du prøver å tilpasse dette på en eller annen måte, er du velkommen til å sprette ideer fra meg. Jeg håper dette virkelig viser å vise hvor mye du kan gjøre innen WordPress ved å kombinere litt JavaScript, PHP og MySQL. Som alltid, ikke glem å sjekke ut alle våre andre WordPress-artikler.

Utforsk mer om: Programmering, Webmaster Tools, Wordpress.