Annonse
AJAX er en bemerkelsesverdig webteknologi som beveget oss utover den enkle “klikk på 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 å hente og vise innhold dynamisk uten at brukeren beveger seg bort fra den gjeldende siden. Dette fører til en langt mer interaktiv brukeropplevelse, og kan også øke hastigheten på ting siden en helt ny webside ikke trenger å lastes inn. Heldigvis er det ganske enkelt å gjøre bruk av AJAX innen WordPress-miljøet, og i dag skal jeg vise deg hvordan.
Denne Ajax-opplæringen skal anses som ganske avansert, og fortsetter fra forrige gang vi lærte det hvordan du bruker tilpassede databasetabeller Arbeide med tilpassede databasetabeller i WordPressEn rask skanning av siden Best of WordPress Plugins vil avsløre noen av de mange unike og nisjemessige måtene du kan gjøre bloggen til å jobbe hardere på. Hva om du allerede har en database med ... Les mer innenfra en WordPress-mal - i mitt eksempel ble en enkel eksisterende tabell med kundedata brukt. Når det gjelder å sette inn ting tilbake i databasen, kommer vi til å bruke litt AJAX-magi innen WordPress.
Derfor vil all koden i dagens opplæring referere til det vi skrev forrige gang, men hvis du bare ser etter hvordan du gjør AJAX i WordPress, er det like relevant.
Hvorfor bruke AJAX?
Den vanligste bruken av AJAX er relatert til skjemaer - å sjekke om et brukernavn er tatt, eller fylle ut 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 begivenhet (som at en bruker klikker på noe, eller skriver noe) bundet til en tjenersiden handling som oppstår i bakgrunn.
Vi kommer til å bruke den til å legge til nye oppføringer i den viktige kundetabell-tabellen vår, men du kan sannsynligvis komme med noe mer spennende.
Oversikt over hvordan du bruker AJAX i WordPress
- Rediger din tilpassede mal for å inkludere et skjema eller en JavaScript-hendelse som vil sende inn data via jQuery AJAX til admin-ajax.php inkludert det du legger inn data uansett. Forsikre deg om at jQuery lastes inn.
- Definer en funksjon i temaet ditt function.php; les innleggsvariabler, og returner noe tilbake til brukeren hvis du ønsker det.
- Legg til en AJAX actionkrok for din funksjon.
Opprette skjemaet
La oss starte med å lage et enkelt skjema i front-enden for å legge inn nye kundeopplysninger. Det er ikke noe komplisert, bare bytt ut hoveddelen av den tilpassede malen med denne koden som vi startet forrige uke, rundt hvor is_user_logged_in () -sjekken skjer:
if (is_user_logged_in ()):?>
Det eneste som kan se rart på deg, er at det er bruk av et skjult inntastingsfelt som heter handling - dette inneholder navnet på funksjonen vi vil utløse via AJAX.
PHP-mottakeren
Neste, åpne opp functions.php og legg til følgende linje for å sikre at jQuery lastes inn på nettstedet ditt:
wp_enqueue_script ( 'jquery');
Den grunnleggende strukturen for å skrive en AJAX-samtale 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 handlingskroker som forteller WordPress "Jeg har en funksjon som heter myFunction, og jeg vil at du skal lytte etter den fordi den kommer til å bli kalt gjennom AJAX-grensesnittet" - den første er for brukere på administratornivå, mens wp_ajax_nopriv_ er for brukere som ikke er logget inn. Her er den komplette koden for functions.php som vi kommer til å bruke for å sette inn data i vår spesielle kundetabell, som jeg vil forklare om kort tid:
wp_enqueue_script ( 'jquery'); funksjon addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adresse = $ _POST ['adresse']; if ($ wpdb-> Sett ( 'kunder', matrise ( 'name' => $ name, 'email' => $ email, 'address' => $ -adresse, 'phone' => $ -telefon. )) FALSE) {echo "Error"; } ellers { ekko "kunde". $ navn. "ble 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 det global $ wpdb for å gi oss direkte tilgang til databasen. Vi tar deretter tak i POST variabler som inneholder skjemadataene. Funksjonen er omgitt av et IF-utsagn $ Wpdb-> innsats, som er det vi bruker for å sette inn data i tabellen vår. Siden WordPress gir spesifikke funksjoner for å sette inn vanlige innlegg og metadata, er dette $ Wpdb-> innsats metoden brukes vanligvis bare for tilpassede tabeller. Du kan les mer om det på Codex, men i utgangspunktet tar det navnet på tabellen som skal settes inn i, etterfulgt av en matrise av kolonne / verdipar.
De FALSK sjekker om innsettingsfunksjonen mislyktes, og i så fall sender den ut “feil“. Hvis ikke sender vi bare en melding til brukeren om det Kunde X ble lagt til, og ekko av $ Wpdb-> insert_id variabel, som indikerer automatisk tilvekstvariabel av den siste innsettingsoperasjonen som skjedde (forutsatt at du har angitt et felt som automatisk øker, som en ID).
Til slutt, dø() vil overstyre standard dø (0) levert av WordPress - dette er ikke viktig som sådan, men uten det kommer du til å få 0 lagt til slutten av alt du sender tilbake til malen.
Javascript
Det siste trinnet er den magiske biten - selve Javascript som vil sette i gang AJAX-samtalen. Du vil merke at i det skjemaet vi la til tidligere, ble handlingsfeltet tomt. Det er fordi vi vil overstyre dette med AJAX-anropet vårt. Den generelle måten å gjøre dette på ville være:
jQuery.ajax ({type: "POST", url: "/wp-admin/admin-ajax.php", // vår PHP-behandlingsfildata: "myDataString", suksess: funksjon (resultater) {// gjør noe med returnerte data})};
Det er den grunnleggende strukturen i AJAX-samtalen vi bruker, men absolutt ikke den eneste måten du kan gjøre det på. Du lurer kanskje på hvorfor vi viser til det wp-admin her, selv om dette vil være i forkant av siden. Det er bare her AJAX-handler er bosatt, enten du bruker den til front- eller administratorfunksjoner - forvirrende, jeg vet. Lim inn følgende kode direkte i kundemalen:
På første linje knytter vi ajaxSubmit-funksjonen til skjemaet vi lagde tidligere - så når brukeren klikker på innsending, går den via vår spesielle AJAX-funksjon. Uten dette vil vår form ikke gjøre noe. I vår ajaxSubmit () funksjon, er det første vi gjør serialize () formen. Dette tar bare alle formverdiene, og gjør dem om til en lang streng som PHP-en vår vil analysere senere. Hvis det går bra, legger vi de returnerte dataene inn i DIV med tilbakemeldings-ID.
Det er det. Lagre alt, oppdater og prøv å sende inn skjemadata. Hvis du har problemer, kan du se det hele koden til sidemalen her (basert på standardtemaet elleve), og koden du vil legge til features.php her(ikke erstatt, bare legg til dette på slutten).
Ting å huske på
Sikkerhet: Denne koden er ikke produksjonsklar og er kun ment å lære. Vi har utelatt ett sentralt punkt, og det er bruken av et wp-nonce - en engangskode generert av WordPress som sikrer at AJAX-forespørselen bare kommer fra der den var ment; et passord hvis du vil. Uten det kan funksjonen din effektivt utnyttes til å sette inn tilfeldige data. SQL-injeksjonsangrep er imidlertid ikke noe problem, fordi vi dirigerte spørsmål gjennom WordPress $ Wpdb-> innsats funksjon - WordPress renser alle innganger for deg og gjør dem trygge.
Oppdatering av kundetabellen: Akkurat nå sender vi bare en bekreftelsesmelding tilbake, men kundetabellen blir ikke oppdatert - du ser bare de ekstra oppføringene hvis du oppdaterer siden (hvilken type beseirer formålet med å gjøre dette alt via AJAX). Se om du kan lage en ny AJAX-funksjon som kan gi ut tabellen dynamisk.
Inndatavalidering: fordi det ikke er noen validering med skjemadataene, er det faktisk mulig å legge til blanke oppføringer eller flere oppføringer hvis du trykker for mange ganger. Noen inndatavalidering i skjemafeltene, sletting av dem når de er fullført, samt SQL for å sjekke e-postadressen eller telefonnummeret som ikke allerede eksisterer i databasen, ville være nyttig.
Det er det fra meg denne uken - hvis du har hatt noen problemer med å følge denne opplæringen, kan du gjerne komme i kontakt via kommentarene, og jeg vil gjøre mitt beste for å hjelpe deg; eller hvis du prøver å tilpasse dette på noen måte, kan du gjerne sprite ideer fra meg. Jeg håper dette virkelig viser hvor mye du kan gjøre innen WordPress ganske enkelt ved å kombinere litt JavaScript, PHP og MySQL. Ikke glem å sjekke ut alle våre andre som alltid WordPress-artikler.
James har en BSc i kunstig intelligens, og er CompTIA A + og Network + sertifisert. Han er hovedutvikler av MakeUseOf, og bruker fritiden sin på å spille VR paintball og brettspill. Han har bygd pc-er siden han var liten.
