AJAX est une technique que vous pouvez utiliser en Javascript pour r\u00e9cup\u00e9rer les donn\u00e9es du serveur et mettre \u00e0 jour le contenu de votre page sans la recharger dans votre navigateur. Dans cet article, nous verrons comment utiliser correctement AJAX dans WordPress.<\/p>\n
La plupart d’entre vous sont probablement familiaris\u00e9s avec l’ex\u00e9cution de requ\u00eates AJAX en dehors de WordPress et souhaitent savoir comment proc\u00e9der dans WordPress. Vous vous posez peut-\u00eatre les questions suivantes :<\/p>\n
Dans WordPress, vous pouvez effectuer des requ\u00eates AJAX dans l’administration et\/ou le frontend\u00a0; le processus est le m\u00eame avec quelques diff\u00e9rences dans la r\u00e9ponse aux questions ci-dessus. Plongeons dedans\u00a0!<\/p>\n
La premi\u00e8re chose dont vous avez besoin est, \u00e9videmment, le javascript o\u00f9 vous voulez envoyer la requ\u00eate AJAX. Il doit \u00eatre mis en file d’attente en utilisant une m\u00e9thode valide d’ajout de scripts \u00e0 WordPress<\/a>, que ce soit en frontend ou en backend. Tr\u00e8s probablement, vous avez d\u00e9j\u00e0 configur\u00e9 un script dans lequel vous avez juste besoin d’envoyer ou de demander quelque chose \u00e0 WordPress.<\/p>\n La publication d’AJAX dans WordPress n\u00e9cessite que vous transmettiez une variable d’objet Javascript en tant que donn\u00e9es \u00e0 la requ\u00eate. Dans l’objet, vous devez fournir au moins une propri\u00e9t\u00e9\u00a0; ‘ En ce qui concerne la r\u00e9ponse \u00e0 la question 1 ci-dessus\u00a0: \u00e0 quelle URL devez-vous envoyer votre requ\u00eate AJAX\u00a0? Cela diff\u00e8re selon que votre script est mis en file d’attente dans l’administrateur ou le frontend. Comme AJAX est d\u00e9j\u00e0 int\u00e9gr\u00e9 aux \u00e9crans d’administration de WordPress, vous pouvez simplement utiliser la variable globale Pour g\u00e9rer les requ\u00eates AJAX en PHP, vous vous connectez \u00e0 l’action Plongeons directement dans le code. Nous allons commencer par comment ajouter des requ\u00eates AJAX dans le panneau d’administration.<\/p>\n Je suppose que vous avez d\u00e9j\u00e0 un script en file d’attente qui r\u00e9agit \u00e0 une action de l’utilisateur, rassemble des donn\u00e9es et est pr\u00eat \u00e0 effectuer une requ\u00eate AJAX, soit pour mettre \u00e0 jour quelque chose, soit pour demander des informations \u00e0 WordPress. Le code ci-dessous est un exemple tr\u00e8s simplifi\u00e9 ; le code met en file d’attente un fichier Javascript dans le th\u00e8me pour l’administrateur, et \u00e0 l’int\u00e9rieur du code Javascript, il configure des variables al\u00e9atoires, ex\u00e9cute AJAX au chargement de la page et affiche la r\u00e9ponse dans la console.<\/p>\n Comme vous pouvez le voir dans le code Javascript ci-dessus, vous configurez un objet Javascript (pensez-y comme un tableau) avec toutes les donn\u00e9es que vous souhaitez transmettre, y compris l’importante De plus, comme mentionn\u00e9 ci-dessus, \u00e9tant donn\u00e9 qu’AJAX est d\u00e9j\u00e0 int\u00e9gr\u00e9 aux \u00e9crans d’administration de WordPress, vous utilisez simplement la variable globale Nous allons maintenant ajouter du code pour accepter cette requ\u00eate AJAX en PHP. Parce que j’ai fourni ‘ Dans votre fonction accroch\u00e9e, vous avez un acc\u00e8s complet \u00e0 WordPress ; vous pouvez utiliser toutes les fonctions WordPress, les requ\u00eates et acc\u00e9der aux variables globales (par exemple Il est facultatif de renvoyer quelque chose \u00e0 Javascript (par exemple, lorsque vous souhaitez uniquement envoyer une demande pour mettre \u00e0 jour ou enregistrer quelque chose et que vous n’avez pas besoin de confirmation). Si vous voulez passer quelque chose en retour, simplement Une note finale importante sur la derni\u00e8re ligne\u00a0; Le processus d’ex\u00e9cution d’AJAX dans le frontend est le m\u00eame que dans l’administration, mais un peu plus compliqu\u00e9 pour r\u00e9pondre \u00e0 la question 1\u00a0: vers quelle URL AJAX doit-il publier. Dans l’exemple ci-dessus pour ex\u00e9cuter AJAX dans l’administration, nous avions d\u00e9j\u00e0 une variable Javascript globale Lorsque vous mettez en file d’attente un script frontal qui effectuera des requ\u00eates AJAX dans votre th\u00e8me ou plugin, vous devez transmettre l’URL AJAX de WordPress en tant que variable \u00e0 ce Javascript, en utilisant Maintenant, dans votre Javascript, vous avez acc\u00e8s \u00e0 un objet Javascript global Lorsque vous traitez avec AJAX en frontend, il y a encore une chose \u00e0 garder \u00e0 l’esprit concernant le crochet que vous utilisez pour accepter les requ\u00eates AJAX. Vous vous connectez toujours \u00e0 Quant au contenu de votre fonction hook\u00e9e AJAX c’est le m\u00eame que pour les requ\u00eates admin. Vous avez un acc\u00e8s complet \u00e0 WordPress, r\u00e9cup\u00e9rez les variables transmises \u00e0 partir de Parce qu’AJAX facilite le transfert de donn\u00e9es entre le script et le backend, vous devez absolument prendre les mesures n\u00e9cessaires pour s\u00e9curiser votre code. Cela inclut la d\u00e9sinfection de toutes les donn\u00e9es avant de les enregistrer, mais \u00e9galement l’utilisation de la fonctionnalit\u00e9 "nonce" de WordPress pour v\u00e9rifier si les demandes proviennent d’emplacements corrects et accept\u00e9s. Lisez la documentation de WordPress sur nonce<\/a> si vous ne le connaissez pas.<\/p>\n La pr\u00e9misse de base est la suivante; vous utilisez une m\u00e9thode WordPress en g\u00e9n\u00e9rant une valeur nonce ( Ajoutons un peu de s\u00e9curit\u00e9 \u00e0 l’exemple de code que nous avons fait ci-dessus. Nous allons d’abord g\u00e9n\u00e9rer un nonce et le transmettre dans notre Ce qui est pass\u00e9 comme ‘ Et enfin, dans notre action<\/code>‘. La valeur de la action<\/code>propri\u00e9t\u00e9 ‘ ‘ est une cha\u00eene qui peut \u00eatre (presque) tout ce que vous voulez. Cette action indique \u00e0 WordPress comment router la requ\u00eate AJAX. Mais il d\u00e9finit \u00e9galement une partie du nom du crochet auquel vous devrez vous accrocher en PHP pour g\u00e9rer la requ\u00eate AJAX.<\/p>\najaxurl<\/code>. Mais pour les requ\u00eates frontales, cela devient un peu plus compliqu\u00e9 car vous devez fournir manuellement l’URL AJAX avec votre Javascript. Plus \u00e0 ce sujet ci-dessous.<\/p>\nwp_ajax_<your action name><\/code>. Si vous souhaitez ex\u00e9cuter des requ\u00eates AJAX en frontend pour les utilisateurs non connect\u00e9s, vous pouvez \u00e9galement vous connecter \u00e0 wp_ajax_nopriv_<your action name><\/code>. Plus \u00e0 ce sujet ci-dessous. Dans votre fonction hook\u00e9e, vous pouvez acc\u00e9der aux donn\u00e9es transmises depuis Javascript en r\u00e9f\u00e9ren\u00e7ant le $_POST<\/code>tableau. Pour renvoyer quelque chose, vous faites simplement \u00e9cho \u00e0 quelque chose. C’est la r\u00e9ponse courte \u00e0 la question 2 ci-dessus.<\/p>\nEffectuer des requ\u00eates AJAX dans l’administrateur WordPress<\/h2>\n
add_action('admin_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_send_something',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(ajaxurl, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\naction<\/code>propri\u00e9t\u00e9 ‘ ‘.<\/p>\najaxurl<\/code>comme URL AJAX.<\/p>\nawhitepixel_send_something<\/code>‘ comme valeur de ‘ action<\/code>‘, je dois m’accrocher \u00e0 wp_ajax_awhitepixel_send_something<\/code>.<\/p>\nadd_action('wp_ajax_awhitepixel_send_something', function() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n wp_die();\n});<\/code><\/pre>\n$wpdb<\/code>pour les requ\u00eates de base de donn\u00e9es). Toutes les variables que vous avez pass\u00e9es en Javascript seront disponibles dans $_POST<\/code>le tableau avec les cl\u00e9s que vous avez fournies dans l’objet Javascript.<\/p>\necho<\/code>votre sortie. Pour g\u00e9n\u00e9rer des variables plus complexes qu’une simple cha\u00eene, vous devez la renvoyer sous la forme d’un tableau encod\u00e9 en json afin que Javascript puisse la lire et l’analyser correctement. Quelque chose comme \u00e7a;<\/p>\n$pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\nwp_die()<\/code>. Toutes les fonctions de rappel AJAX doivent "fermer le fil" ou se terminer correctement en faisant die()<\/code>ou exit()<\/code>. Dans WordPress, nous utilisons wp_die()<\/code>pour une int\u00e9gration correcte, mais le r\u00e9sultat est le m\u00eame. Si vous obtenez un "0" bizarre dans vos r\u00e9ponses AJAX, c’est probablement parce que vous n’a pas fait wp_die()<\/code>ou die()<\/code>Toujours s’assurer que "tu meurs" \u00e0 la fin de toutes les fonctions accroch\u00e9es \u00e0 wp_ajax<\/code>.<\/p>\nEx\u00e9cution de requ\u00eates AJAX dans l’interface WordPress<\/h2>\n
ajaxurl<\/code>, mais cette variable n’est pas disponible en interface. Nous devons le fournir nous-m\u00eames. Pour obtenir la valeur de l’URL AJAX de WordPress que vous utilisez admin_url('admin-ajax.php')<\/code>(oui, \u00abadmin url\u00bb pour le frontend).<\/p>\nwp_localize_script()<\/code>.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nTheme_Variables<\/code>(ce nom peut \u00eatre ce que vous voulez), avec l’URL AJAX de WordPress comme valeur pour ajax_url<\/code>la propri\u00e9t\u00e9 ‘ ‘. Votre fonction AJAX ressemblerait \u00e0 ceci\u00a0:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax_<your action name><\/code>, mais ce crochet ne fonctionnera que pour les visiteurs connect\u00e9s. Si vous souhaitez effectuer des requ\u00eates AJAX pour les visiteurs qui ne sont pas connect\u00e9s, vous devez (\u00e9galement) vous connecter \u00e0 wp_ajax_nopriv_<your action name><\/code>. Normalement, pour les requ\u00eates AJAX frontales n\u00e9cessaires au bon fonctionnement du th\u00e8me, vous vous accrochez aux deux, en les pointant tous les deux vers la m\u00eame fonction.<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n$_POST<\/code>, renvoyez \u00e9ventuellement quelque chose en ex\u00e9cutant echo<\/code>, et vous devez toujours, toujours vous rappeler de \u00abmourir\u00bb avec wp_die()<\/code>\u00e0 la toute fin.<\/p>\nS\u00e9curiser vos requ\u00eates AJAX<\/h2>\n
wp_create_nonce()<\/code>) ou en g\u00e9n\u00e9rant un champ de saisie masqu\u00e9 avec le nonce comme valeur (wp_nonce_field()<\/code>). Dans votre requ\u00eate AJAX, vous transmettez la valeur nonce (qui est cod\u00e9e par WordPress) dans la requ\u00eate, et dans la partie d’acceptation (wp_ajax_<\/code>hook), vous v\u00e9rifiez le nonce avec ce que vous avez d\u00e9fini \u00e0 l’origine.<\/p>\nwp_localize_script<\/code>URL avec AJAX. En tant que param\u00e8tre, wp_create_nonce()<\/code>nous d\u00e9finissons une cha\u00eene unique que nous seuls devrions conna\u00eetre, pour ainsi dire. Dans l’exemple ci-dessous, je vais pour ‘ awhitepixel-nonce<\/code>‘.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('awhitepixel-nonce')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nnonce<\/code>‘ dans nos variables Javascript \u00e0 l’interface est un nombre al\u00e9atoire g\u00e9n\u00e9r\u00e9 par WordPress. Personne d’autre que nous, auteurs de ce script, ne sait que le nonce valide est ‘ awhitepixel-nonce<\/code>‘. Dans notre Javascript, nous r\u00e9cup\u00e9rons la valeur nonce et la transmettons directement dans notre requ\u00eate AJAX\u00a0:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14,\n 'nonce': Theme_Variables.nonce\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax<\/code>fonction hook\u00e9e, nous devrions commencer par v\u00e9rifier si le nonce \u00e9tait valide avec wp_verify_nonce()<\/code>. Nous fournissons la cha\u00eene unique que nous avons d\u00e9finie ci-dessus, et si WordPress ne correspond pas \u00e0 la valeur encod\u00e9e unique transmise avec cette cha\u00eene, nous terminons imm\u00e9diatement\u00a0:<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n wp_die(-1);\n }\n\u00a0\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n