Een tutorial over het gebruik van AJAX in WordPress

Advertentie

AJAX is een opmerkelijke webtechnologie die ons voorbij de simpele "klik op de link, ga naar een andere pagina" structuur van Het internet 1.0.

AJAX, wat staat voor Asynchroon Javascript en XML, stelt websites in staat om dynamisch inhoud op te halen en weer te geven zonder dat de gebruiker de huidige pagina verlaat. Dit leidt tot een veel interactievere gebruikerservaring en kan de zaken ook versnellen omdat er geen hele nieuwe webpagina hoeft te worden geladen. Gelukkig is het gebruik van AJAX vrij eenvoudig vanuit de WordPress-omgeving, en vandaag laat ik je zien hoe.

Deze Ajax-tutorial moet als redelijk geavanceerd worden beschouwd en gaat verder vanaf de vorige keer dat we hebben geleerd hoe u aangepaste databasetabellen gebruikt Werken met aangepaste databasetabellen in WordPressEen snelle scan van de pagina Beste van WordPress-plug-ins onthult enkele van de vele unieke en niche-manieren waarop u uw blog harder kunt laten werken. Wat als je al een database hebt van ... Lees verder

vanuit een WordPress-sjabloon - in mijn voorbeeld werd een eenvoudige bestaande tabel met klantgegevens gebruikt. Als het gaat om het terugplaatsen van dingen in de database, gaan we gebruik maken van een beetje AJAX-magie binnen WordPress.

Alle code in de tutorial van vandaag verwijst daarom naar wat we de vorige keer hebben geschreven, maar als je alleen op zoek bent naar hoe je AJAX in WordPress moet doen, dan is het net zo relevant.

Waarom AJAX gebruiken?

Het meest voorkomende gebruik van AJAX heeft betrekking op formulieren: controleren of een gebruikersnaam wordt gebruikt of de rest van het formulier vullen met verschillende vragen, afhankelijk van een bepaald antwoord dat u geeft. Maar eigenlijk gebruik je AJAX wanneer je een evenement wilt (zoals een gebruiker die op iets klikt of iets typt) gebonden aan een server-kant actie die plaatsvindt in de achtergrond.

We gaan het gebruiken om nieuwe vermeldingen toe te voegen aan onze belangrijke aangepaste klantendatabasetabel, maar u kunt waarschijnlijk iets spannender bedenken.

Overzicht van het gebruik van AJAX in WordPress

1. Bewerk uw aangepaste sjabloon om een ​​formulier of javascript-gebeurtenis op te nemen die gegevens via jQuery AJAX naar zal verzenden admin-ajax.php inclusief alle postgegevens die u wilt doorgeven. Zorg ervoor dat jQuery wordt geladen.
2. Definieer een functie in je thema's function.php; lees postvariabelen en stuur iets terug naar de gebruiker als je dat wilt.
3. Voeg een AJAX actiehaak voor uw functie.

Het formulier maken

Laten we beginnen met het maken van een eenvoudig formulier aan de voorkant voor het invoeren van nieuwe klantgegevens. Het is niets ingewikkelds, vervang gewoon het hoofdgedeelte van uw aangepaste sjabloon door deze code die we vorige week zijn begonnen, waar de controle is_user_logged_in () plaatsvindt:

if (is_user_logged_in ()):?> 

Naam:E-mail adres:Telefoon:Adres:

Het enige dat u misschien vreemd lijkt, is dat er een verborgen invoerveld wordt genoemd actie - dit bevat de naam van de functie die we via AJAX activeren.

De PHP-ontvanger

Open vervolgens functies.php en voeg de volgende regel toe om ervoor te zorgen dat jQuery op uw site wordt geladen:

wp_enqueue_script ('jquery');

De basisstructuur voor het schrijven van een AJAX-oproep is als volgt:

functie myFunction () { //doe iets. dood gaan(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Die laatste twee regels zijn actiehaken die WordPress vertellen "Ik heb een functie genaamd myFunction, en ik wil dat je ernaar luistert, omdat deze wordt aangeroepen via de AJAX-interface" - de eerste is voor gebruikers op admin-niveau, terwijl wp_ajax_nopriv_ is voor gebruikers die niet zijn ingelogd. Hier is de volledige code voor functies.php die we gaan gebruiken om gegevens in te voegen in de tabel met speciale klanten, die ik binnenkort zal uitleggen:

wp_enqueue_script ('jquery'); functie addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['adres']; if ($ wpdb-> insert ('klanten', array ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Fout"; } anders { echo "Klant" ". $ naam. "'succesvol toegevoegd, rij-ID is". $ wpdb-> insert_id; } dood gaan(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // niet echt nodig

Net als voorheen verklaren we de globaal $ wpdb om ons direct toegang te geven tot de database. We pakken dan de POST variabelen die de formuliergegevens bevatten. Omringd door een IF-statement is de functie $ wpdb-> invoegen, dat is wat we gebruiken om gegevens in onze tabel in te voegen. Omdat WordPress specifieke functies biedt voor het invoegen van reguliere berichten en metadata, dit $ wpdb-> invoegen methode wordt over het algemeen alleen gebruikt voor aangepaste tabellen. Jij kan lees er meer over op de Codex, maar in feite is er de naam van de tabel nodig om in te voegen, gevolgd door een matrix van kolom / waardeparen.

De ONWAAR controleert om te zien of de invoegfunctie is mislukt, en als dat het geval is, wordt uitgevoerdfout“. Zo niet, dan sturen we alleen een bericht naar de gebruiker Klant X is toegevoegd, en in navolging van de $ wpdb-> insert_id variabele, die de auto-increment variabele van de laatste invoegbewerking die heeft plaatsgevonden (ervan uitgaande dat u een veld heeft ingesteld dat automatisch wordt verhoogd, zoals een ID).

Tenslotte, dood gaan() zal de standaard overschrijven sterven (0) geleverd door WordPress - dit is op zich niet essentieel, maar zonder dat krijg je het wel 0 toegevoegd aan het einde van alles wat u terugstuurt naar de sjabloon.

Het Javascript

De laatste stap is het magische deel - het eigenlijke Javascript dat de AJAX-aanroep zal initiëren. U zult merken dat in het formulier dat we eerder hebben toegevoegd, het actieveld leeg was. Dat komt omdat we dit zullen overschrijven met ons AJAX-gesprek. De algemene manier om dit te doen is:

jQuery.ajax ({type: "POST", url: "/wp-admin/admin-ajax.php", // onze PHP-handler-bestandsgegevens: "myDataString", success: function (results) {// doe iets met geretourneerde gegevens})};

Dat is de basisstructuur van AJAX-oproep die we zullen gebruiken, maar zeker niet de enige manier waarop u dit kunt doen. Je vraagt ​​je misschien af ​​waarom we het hebben wp-admin hier, ook al staat dit aan de voorkant van de site. Dit is precies waar de AJAX-handler staat, of je het nu gebruikt voor front- of admin-functies - verwarrend, ik weet het. Plak de volgende code rechtstreeks in de klantsjabloon:

In de eerste regel koppelen we onze ajaxSubmit-functie aan het formulier dat we eerder hebben gemaakt - dus wanneer de gebruiker op verzenden klikt, gaat dit via onze speciale AJAX-functie. Zonder dit zal ons formulier niets doen. In onze ajaxSubmit () functie, is het eerste wat we doen serialiseren () het formulier. Dit neemt gewoon alle vormwaarden en verandert ze in een lange reeks die onze PHP later zal ontleden. Als het allemaal goed komt, plaatsen we de geretourneerde gegevens in de DIV met de id van feedback.

Dat is het. Sla alles op, vernieuw en probeer wat formuliergegevens in te dienen. Als je problemen ondervindt, kun je bekijken de volledige code van de paginasjabloon hier (gebaseerd op het standaard thema van elfentwintig), en de code om toe te voegen functies.php hier(niet vervangen, voeg dit gewoon aan het einde toe).

Dingen om in gedachten te houden

Veiligheid: Deze code is niet klaar voor productie en is alleen bedoeld om te leren. We hebben één belangrijk punt weggelaten, en dat is het gebruik van een wp-nonce - een eenmalige code gegenereerd door WordPress die ervoor zorgt dat het AJAX-verzoek alleen komt van waar het bedoeld was; een wachtwoord als je wilt. Zonder dat zou uw functie effectief kunnen worden benut om willekeurige gegevens in te voegen. SQL-injectie-aanvallen zijn echter geen probleem, omdat we zoekopdrachten via de WordPress hebben geleid $ wpdb-> invoegen functie - WordPress reinigt alle invoer voor u en maakt ze veilig.

De tabel met klanten bijwerken: Op dit moment sturen we alleen een bevestigingsbericht terug, maar de tabel met klanten wordt niet bijgewerkt - u ziet alleen de extra vermeldingen als u de pagina vernieuwt (wat verslaat het doel om dit allemaal via AJAX te doen). Kijk of je een nieuwe AJAX-functie kunt maken die de tabel dynamisch kan uitvoeren.

Invoervalidatie: omdat er geen validatie plaatsvindt met de formuliergegevens, is het eigenlijk mogelijk om lege vermeldingen of meerdere vermeldingen toe te voegen als u te vaak drukt. Enige invoervalidatie op de formuliervelden, ze wissen wanneer ze zijn voltooid, evenals SQL om het e-mailadres of telefoonnummer te controleren dat nog niet in de database bestaat, zou nuttig zijn.

Dat is het deze week van mij - als je problemen hebt gehad met het volgen van deze tutorial, neem dan gerust contact met ons op via de reacties en ik zal mijn best doen om je te helpen; of als je dit op de een of andere manier probeert aan te passen, voel je dan vrij om ideeën van me af te leiden. Ik hoop dat dit echt laat zien hoeveel je vanuit WordPress kunt doen door simpelweg een beetje JavaScript, PHP en MySQL te combineren. Vergeet zoals altijd niet al onze andere te bekijken WordPress artikelen.