Een handleiding over het gebruik van AJAX in WordPress

AJAX is een opmerkelijke webtechnologie die ons verder dan het eenvoudige heeft gebracht “klik op link, ga naar een andere pagina” structuur van Het internet 1.0.

AJAX, wat staat voor Asynchrone Javascript en XML, stelt websites in staat om inhoud dynamisch op te halen en weer te geven zonder dat de gebruiker zich van de huidige pagina verwijdert. Dit leidt tot een veel meer interactieve gebruikerservaring en kan de dingen 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 vrij geavanceerd worden beschouwd en gaat door vanaf de vorige keer, toen we leerden hoe aangepaste databasetabellen te gebruiken Werken met aangepaste databasetabellen In WordPress Werken met aangepaste databasetabellen in WordPress Een snelle scan van de beste pagina van WordPress-plug-ins onthult enkele van de vele unieke en niche manieren waarop je je blog harder kunt laten werken. Stel dat u al een database hebt met ... Lees meer vanuit een WordPress-sjabloon - in mijn voorbeeld is een eenvoudige bestaande tabel met klantgegevens gebruikt. Als het echter gaat om het inbrengen van dingen in de database, maken we gebruik van een beetje AJAX-magie binnen WordPress.

Alle code in de tutorial van vandaag zal daarom refereren aan wat we de vorige keer schreven, maar als je gewoon op zoek bent naar AJAX in WordPress, dan is het even relevant.

Waarom AJAX gebruiken?

Het meest voorkomende gebruik van AJAX is gerelateerd aan formulieren: controleren of een gebruikersnaam wordt gebruikt of de rest van het formulier invullen met verschillende vragen, afhankelijk van een bepaald antwoord dat u geeft. In principe gebruik je echter AJAX wanneer je een evenement wilt (zoals een gebruiker die op iets klikt of iets intypt) gebonden aan een serverzijde actie die plaatsvindt in de achtergrond.

We gaan het gebruiken om nieuwe items 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 zal verzenden naar admin-ajax.php inclusief alle postgegevens die u wilt doorgeven. Zorg dat jQuery wordt geladen.
2. Definieer een functie in uw thema's function.php; lees postvariabelen en retourneer iets terug naar de gebruiker als u dat wenst.
3. Voeg een toe AJAX actiehaak voor je 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 begonnen, waar de is_user_logged_in () controle plaatsvindt:

if (is_user_logged_in ()):?> 
 Naam:  E-mail:  Telefoon:  Adres:    
 

 
 

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

De PHP-ontvanger

Open vervolgens functions.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:

function myFunction () // do something die ();  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 met de naam myFunction en ik wil dat je ernaar luistert omdat deze via de AJAX-interface wordt gebeld” - de eerste is voor gebruikers van beheerdersniveau, terwijl wp_ajax_nopriv_ is voor gebruikers die niet zijn ingelogd. Hier is de volledige code voor functions.php die we gaan gebruiken om gegevens in te voegen in onze speciale klantentabel, die ik binnenkort zal uitleggen:

wp_enqueue_script ( 'jquery'); function addCustomer () global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adres = $ _POST ['adres']; if ($ wpdb-> insert ('klanten', array ('naam' => $ naam, 'email' => $ email, 'address' => $ address, 'phone' => $ phone)) === FALSE) echo "Fout";  else 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 globale $ wpdb om ons directe toegang tot de database te geven. We pakken dan de POST variabelen die de formuliergegevens bevatten. Omringd in een IF-statement is de functie $ Wpdb-> insert, dat is wat we gebruiken om gegevens in onze tabel in te voegen. Omdat WordPress specifieke functies biedt voor het invoegen van normale berichten en metadata, dit $ Wpdb-> insert methode wordt over het algemeen alleen gebruikt voor aangepaste tabellen. U kunt er meer over lezen op de Codex, maar in feite neemt het de naam aan van de tabel die moet worden ingevoegd, gevolgd door een rangschikking van kolom / waarde paren.

De === FALSE controleert of de invoegfunctie is mislukt en, zo ja, wordt uitgevoerd “fout“. Zo niet, dan sturen we alleen een bericht naar de gebruiker Klant X is toegevoegd, en het echoën van de $ Wpdb-> insert_id variabele, die de automatisch verhogen variabele van de laatste invoegbewerking die is gebeurd (ervan uitgaande dat u een veld hebt ingesteld dat automatisch wordt verhoogd, zoals een ID).

Tenslotte, dood gaan() zal de standaard overschrijven sterven (0) aangeboden door WordPress - dit is niet essentieel als zodanig, maar zonder dat je het gaat krijgen 0 toegevoegd aan het einde van alles wat u terugstuurt naar de sjabloon.

Het Javascript

De laatste stap is het magische stukje - het daadwerkelijke Javascript dat de AJAX-oproep start. U zult merken dat in het formulier dat we eerder hebben toegevoegd, het actieveld leeg was. Dat komt omdat we dit zullen opheffen met onze AJAX-oproep. De algemene manier om dit te doen zou zijn:

jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", // onze PHP-handler-bestandsgegevens: "myDataString", succes: functie (resultaten) // doe iets met geretourneerde gegevens);

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

In de eerste regel koppelen we onze ajaxSubmit-functie aan het formulier dat we eerder hebben gemaakt - dus wanneer de gebruiker op submit klikt, gaat deze via onze speciale AJAX-functie. Zonder dit zal onze vorm niets doen. In onze ajaxSubmit () functie, het eerste dat we doen is het formulier serialiseren (). Dit neemt alleen alle formulierwaarden, en verandert ze in een lange reeks die onze PHP later zal ontleden. Als alles goed verloopt, plaatsen we de geretourneerde gegevens in de DIV met het ID van feedback.

Dat is het. Sla alles op, vernieuw en probeer enkele formuliergegevens in te dienen. Als u problemen ondervindt, kunt u hier de volledige code van de paginasjabloon bekijken (op basis van het standaard-thema van de twintig-elf), en de code om hier aan functions.php toe te voegen (niet vervangen, voeg dit gewoon toe aan het einde).

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 afkomstig is van waar het was bedoeld; een sleutel als je wilt. Zonder dat zou uw functie effectief kunnen worden misbruikt om willekeurige gegevens in te voegen. SQL-injectieaanvallen vormen echter geen probleem, omdat we query's via de WordPress hebben gerouteerd $ Wpdb-> insert functie - WordPress maakt alle ingangen voor u schoon 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 aanvullende vermeldingen als u de pagina vernieuwt (welk type verslaat het doel om dit allemaal via AJAX te doen). Kijk of je een nieuwe AJAX-functie kunt maken die de tafel dynamisch kan uitvoeren.

Validatie van invoer: omdat er geen validatie plaatsvindt met de formuliergegevens, is het eigenlijk mogelijk om blanco items toe te voegen of meerdere items als u te vaak drukt. Bepaalde invoervalidatie op de formuliervelden, deze leegmaken als 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 op via de comments 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 zetten. Ik hoop dat dit echt laat zien hoeveel je kunt doen vanuit WordPress door simpelweg een beetje JavaScript, PHP en MySQL te combineren. Zoals altijd, vergeet niet al onze andere WordPress-artikelen te bekijken.

Meer informatie over: Programmeren, Webmasterhulpprogramma's, Wordpress.