A Primer on Ajax in het WordPress Dashboard - Requesting and Responding

In deze tweedelige serie bekijken we hoe we Ajax-specifieke functionaliteit op de juiste manier in het WordPress-dashboard kunnen introduceren.

In het eerste artikel in de serie zijn we begonnen aan een plug-in die een melding weergeeft zodra deze is geactiveerd ... maar dat is alles. In dit artikel voegen we Ajax-functionaliteit toe waarmee gebruikers het bericht kunnen negeren en eindigen met een werkende versie van de plug-in.

In het bijzonder gaan we alle noodzakelijke zaken aan zowel de serverzijde als de clientzijde behandelen die nodig zijn om een Ajax-aanvraag te verwerken en op de juiste manier te reageren.

Ten slotte zullen we een checklist bekijken van items die alle op Ajax gebaseerde WordPress-functionaliteit moet hebben om ervoor te zorgen dat u de API op de juiste manier gebruikt in toekomstige projecten.

Denk aan de nonce

Voordat we aan de slag gaan, is het belangrijk om ervoor te zorgen dat u de nonce-waarde gebruikt in de functie die uw meldingsmethode weergeeft. Ter beoordeling, hier is de functie die we in het eerste artikel hebben opgenomen:

 openbare functie display_admin_notice () $ html = ''; $ html. = ''; $ html. = __ ('De Ajax-meldingsvoorbeeld-plug-in is actief Dit bericht verschijnt totdat u ervoor kiest om het te sluiten.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;

Merk op dat we de nonce-waarde gebruiken wp_create_nonce in een spanelement met de ID van ajax-notification-nonce. Ik breng dit om drie redenen naar voren:

Nonce-waarden bieden beveiligingsmaatregelen en zijn belangrijk wanneer u een type verzoek uitvoert van de voorkant tot de achterkant.
In mijn ervaring is dit een van de dingen die ontwikkelaars het vaakst achterwege laten - dit is bedoeld om ervoor te zorgen dat we dit hebben behandeld voordat we een aanvullende code schrijven.
Het element met de nonce-waarde heeft een specifieke ID nodig, zodat we er gemakkelijk toegang toe hebben met JavaScript bij het initiëren van onze Ajax-aanvraag.

Laten we daarmee de Ajax-functionaliteit gaan schrijven.

Op naar Ajax

Het bouwen van op Ajax gebaseerde functionaliteit in het WordPress Dashboard omvat doorgaans vier belangrijke punten:

Sommige JavaScript-functies die reageren op de gebeurtenis van de gebruiker en deze naar de server verzenden
Een callback-functie aan de server die verantwoordelijk is voor het beheren van het verzoek vanuit de browser
Server-side functionaliteit die de gegevens terugstuurt naar de browser
JavaScript-functionaliteit die verantwoordelijk is voor het afhandelen van het antwoord

Hoewel er geen specifieke volgorde is waarin we deze code moeten schrijven, gaan we gewoon naar de lijst zoals hierboven is aangegeven en werken we er doorheen.

Het verzoek verzenden

De JavaScript-code voor het verzenden van het verzoek is relatief eenvoudig, maar we moeten eerst schetsen wat we eigenlijk gaan doen:

De gebruiker besluit de melding te sluiten
De gebruiker klikt op het verwijderde anker dat we hebben opgegeven
JavaScript reageert op de gebeurtenis wanneer de gebruiker op het anker klikt
JavaScript verzendt een verzoek naar de server

We zullen de code stapsgewijs schrijven om ervoor te zorgen dat deze eenvoudig te volgen is. Allereerst beginnen we met het instellen van de code nadat het venster is geladen en zorgen we ervoor dat het Ajax-meldingsbericht aanwezig is:

 (functie ($) $ (function () // Controleer of de Ajax-melding zichtbaar is, anders // zullen we ons hier geen zorgen over maken. if ($ ('# dismiss-ajax-notification ') .length> 0) // Spullen TODO hier ...););  (JQuery));

Vervolgens moeten we een gebeurtenishandler instellen die wordt geactiveerd zodra de gebruiker op het anker klikt dat we in de melding hebben geplaatst. Hiervoor hebben we de ID van het element van het bericht nodig - dat wil zeggen, ontslaan-ajax-notification.

Omdat het standaardgedrag van een anker is om te proberen naar zijn href attribuut, we moeten ook voorkomen dat de standaardactie plaatsvindt.

 (functie ($) "gebruik strict"; $ (function () // Controleer of de Ajax-melding zichtbaar is als ($ ('# dismiss-ajax-notification'). length> 0) // If dus we moeten een gebeurtenishandler instellen om zijn ontslag $ ('# reject-ajax-notification') te activeren. click (function (evt) evt.preventDefault (); // Meer TODO hier ...); // end if); (jQuery));

Op dit moment zijn we klaar om de aanvraag daadwerkelijk naar de server te verzenden. Om dit te doen, zullen we de jQuery gebruiken post functie. We zullen er drie argumenten doorgeven:

De URL van het adres waarnaar de aanvraag moet worden verzonden. Dit is een globale waarde geboden door WordPress. Het is opgeslagen in de ajaxurl veranderlijk
De hash van opties om naar de server te verzenden. Dit omvat de actie - of de functie - om op de server te vuren en de nonce-waarde voor validatie
De functie die wordt gebruikt om het antwoord af te handelen

Laten we dit nu allemaal opschrijven (inclusief het uitschakelen van de responsfunctie) en dan gaan we meteen naar de servercode.

 (functie ($) $ (function () // Controleer of de Ajax-melding zichtbaar is als ($ ('# dismiss-ajax-notification'). length> 0) // Als dat zo is, moeten we een gebeurtenishandler instellen om het ontslag $ ('# reject-ajax-notification') te activeren. click (function (evt) evt.preventDefault (); // Start een verzoek aan de serverzijde $ .post (ajaxurl,  // De naam van de functie om te vuren op de serveractie: 'hide_admin_notification', // De nonce-waarde die moet worden verzonden voor de nonce van de beveiligingscontrole: $ .trim ($ ('# ajax-notification-nonce'). Text () ), function (response) // TODO response handler);); // end if); (jQuery));

Herinner eerder dat ik zei dat we de ID van het veld met de nonce-waarde moeten weten, dat wil zeggen, ajax-notification-nonce. Merk hierboven op dat we de tekstwaarde van dat element pakken en het naar de server sturen als de waarde van de nonce sleutel.

Het tweede dat opvalt, is dat we een actietoets verzenden met de waarde van hide_admin_notification. Dit is een functie die we op de server moeten schrijven, omdat deze verantwoordelijk is voor het verbergen van de melding.

De aanvraag afhandelen

In ons plugin-bestand moeten we een functie maken met de naam als de hierboven genoemde actiewaarde: hide_admin_notification.

Zoals gewoonlijk praat ik graag over wat de functie gaat doen voordat ik een code schrijf. In dit geval, hier is wat er gedaan moet worden:

We moeten ervoor zorgen dat de inkomende nonce correct is; anders willen we geen code uitvoeren
We moeten de optie die we in het eerste artikel hebben gemaakt updaten om het afdwingen in te stellen op false
We moeten een waarde terugsturen naar de browser zodat deze op de juiste manier op de functie kan reageren

Hier is de code om dat te laten gebeuren:

 openbare functie hide_admin_notification () // Controleer eerst of de nonce overeenkomt met wat we hebben gemaakt bij het weergeven van het bericht. // Zo niet, dan doen we niets. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Als de update naar de optie succesvol is, stuurt u 1 terug naar de browser; // Stuur anders 0. if (update_option ('hide_ajax_notification', true)) die ('1');  else die ('0');  // end if / else // end if

Het is relatief eenvoudig, toch? Het belangrijkste om te begrijpen is dat we de waarde van '1' verzenden in de context van dood gaan als de optie succesvol is bijgewerkt; anders sturen we de waarde van '0'. Hierdoor kunnen we de waarde in het antwoord op de browser lezen om te bepalen hoe we het beste kunnen reageren.

Het is duidelijk dat als de geretourneerde waarde 1 is, we de melding kunnen verbergen.

Voordat we teruggaan naar het JavaScript, moeten we ervoor zorgen dat we deze functie bedraden met behulp van de juiste haak. Dus, in de constructor van de plug-in, laten we een regel toevoegen voor add_action:

 add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification'));

Het belangrijkste om op te merken is dat de tag voor de functie het label 'wp_ajax_hide_admin_notification'.

Als u met Ajax werkt in het WordPress-dashboard, moet uw haak worden toegevoegd aan de wp_ajax_ voorvoegsel en het moet eindigen met de naam van de functie.

Dit is gemakkelijk het op één na belangrijkste wat ontwikkelaars missen als ze aan Ajax-code werken.

Vanaf hier zijn we klaar om terug te gaan naar de client-side code.

De reactie afhandelen

Eindelijk zijn we klaar om het antwoord af te handelen. Dit is eenvoudig: als de server reageert met een 1, dan zullen we ons verstoppen; anders doen we niets.

Toegegeven, de beste praktijk zou zijn om een foutmelding of een soort feedback weer te geven om de gebruiker te laten weten dat er iets fout is gegaan, maar het belangrijkste punt van het artikel is om Ajax in WordPress te demonstreren, dus we zullen gewoon de klassenaam veranderen van bijgewerkt naar fout.

Hier is wat moet worden toegevoegd aan de JavaScript-bron om het antwoord af te handelen:

 functie (antwoord) // Als de reactie succesvol was (dat wil zeggen, 1 werd teruggestuurd), verberg dan de melding; // Anders veranderen we de klassennaam van de melding als ('1' === antwoord) $ ('# ajax-notification'). FadeOut ('slow');  else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error');  // stop als

En dat is het echt. De volledige JavaScript-bron moet er als volgt uitzien:

 (functie ($) $ (function () // Controleer of de Ajax-melding zichtbaar is als ($ ('# dismiss-ajax-notification'). length> 0) // Als dat zo is, moeten we een gebeurtenishandler instellen om het ontslag $ ('# reject-ajax-notification') te activeren. click (function (evt) evt.preventDefault (); // Start een verzoek aan de serverzijde $ .post (ajaxurl,  // De naam van de functie om te vuren op de serveractie: 'hide_admin_notification', // De nonce-waarde die moet worden verzonden voor de nonce van de beveiligingscontrole: $ .trim ($ ('# ajax-notification-nonce'). Text () ), functie (antwoord) // Als het antwoord succesvol was (dat wil zeggen, 1 werd teruggestuurd), verberg de melding; // Anders veranderen we de klassennaam van de melding als ('1' === antwoord) $ ('# ajax-notification'). fadeOut ('slow'); else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error'); // end if);); // end if); (jQuery));

En de PHP van de plug-in zou er als volgt uit moeten zien:

 / * Naam van de plug-in: Ajax-meldingsplug-in URI: http://github.com/tommcfarlin/ajax-notification Beschrijving: Een voorbeeld van een plug-in die wordt gebruikt om de WordPress Ajax API te demonstreren voor een begeleidend artikel op Envato's WPTuts + -site. Versie: 1.0 Auteur: Tom McFarlin Auteur URI: http://tommcfarlin.com Auteur Email: [email protected] Licentie: Copyright 2012 Tom McFarlin ([email protected]) Dit programma is gratis software; je kunt het herdistribueren en / of wijzigen onder de voorwaarden van de GNU General Public License, versie 2, zoals gepubliceerd door de Free Software Foundation. Dit programma wordt verspreid in de hoop dat het nuttig zal zijn, maar ZONDER ENIGE GARANTIE; zonder zelfs de impliciete garantie van VERKOOPBAARHEID of GESCHIKTHEID VOOR EEN BEPAALD DOEL. Zie de GNU General Public License voor meer details. Je zou samen met dit programma een kopie van de GNU General Public License moeten hebben ontvangen; zo niet, schrijf dan naar de Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 VS * / class Ajax_Notification / * ---------------- ---------------------------- * * Constructor * ------------------ -------------------------- * / / ** * Initialiseert de plug-in door localisatie, filters en beheerfuncties in te stellen. * / function __construct () load_plugin_textdomain ('ajax-notification', false, dirname (plugin_basename (__FILE__)). '/ lang'); register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate')); add_action ('admin_enqueue_scripts', array (& $ this, 'register_admin_scripts')); / / Toon de admin-melding alleen als het niet is verborgen als (false == get_option ('hide_ajax_notification')) add_action ('admin_notices', array (& $ this, 'display_admin_notice'));  // end if add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification'));  // einde constructor / * ------------------------------------------- -* * Kernfuncties *-------------------------------------------- - * / / ** * Voeg bij activering een nieuwe optie toe die wordt gebruikt om bij te houden of de melding moet worden weergegeven. * / public function activate () add_option ('hide_ajax_notification', false);  // end activate / ** * Verwijder bij deactivering de optie die werd aangemaakt toen de plug-in werd geactiveerd. * / public function deactivate () delete_option ('hide_ajax_notification');  // end deactivate / ** * Registreert en brengt administratiespecifieke, geminimaliseerde JavaScript-berichten bij. * / public function register_admin_scripts () wp_register_script ('ajax-notification-admin', plugins_url ('ajax-notification / js / admin.min.js')); wp_enqueue_script ('ajax-notification-admin');  // end register_admin_scripts / ** * Maakt de administratie bekend. Geeft ook een verborgen nonce die wordt gebruikt voor beveiliging bij het verwerken van het Ajax-verzoek. * / public function display_admin_notice () $ html = ''; $ html. = ''; $ html. = __ ('De Ajax-meldingsvoorbeeld-plug-in is actief Dit bericht verschijnt totdat u ervoor kiest om het te sluiten.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;  // end display_admin_notice / ** * JavaScript callback gebruikt om de administratie te verbergen wanneer het anker "Afwijzen" op de voorkant wordt geklikt. * / public function hide_admin_notification () // Controleer eerst of de nonce overeenkomt met wat we hebben gemaakt bij het weergeven van het bericht. // Zo niet, dan doen we niets. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Als de update naar de optie succesvol is, stuurt u 1 terug naar de browser; // Stuur anders 0. if (update_option ('hide_ajax_notification', true)) die ('1');  else die ('0');  // end if / else // end if // end hide_admin_notification // eindklasse nieuwe Ajax_Notification ();

Conclusie

Je kunt de plug-in pakken op GitHub. Raadpleeg voor de referentie de volgende bronnen:

WordPress Nonce
jQuery.post
Ajax aan de administratiezijde

Code