{"id":25137,"date":"2021-05-31T11:16:00","date_gmt":"2021-05-31T08:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25137"},"modified":"2021-10-18T02:10:13","modified_gmt":"2021-10-17T23:10:13","slug":"comment-utiliser-jquery-ajax-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-utiliser-jquery-ajax-dans-wordpress\/","title":{"rendered":"Comment utiliser jQuery Ajax dans WordPress"},"content":{"rendered":"

Vous souhaitez impl\u00e9menter jQuery Ajax dans WordPress? Les d\u00e9butants de WordPress rencontrent toujours des difficult\u00e9s \u00e0 utiliser Ajax avec WordPress. Dans cet article, nous \u00e9tudions comment utiliser Ajax dans WordPress en prenant un exemple en direct.<\/p>\n

Pourquoi avoir besoin de jQuery Ajax dans le site Web\u00a0?<\/h3>\n

Ajax (Asynchronous JavaScript And XML) permet \u00e0 une page Web de se mettre \u00e0 jour de mani\u00e8re asynchrone. Cela signifie que les donn\u00e9es peuvent \u00eatre envoy\u00e9es et r\u00e9cup\u00e9r\u00e9es \u00e0 partir d’un serveur de mani\u00e8re asynchrone sans interf\u00e9rer avec l’affichage et le comportement de la page existante. En utilisant Ajax, vous pouvez modifier de petites ou de grandes parties d’une page Web sans actualiser la page enti\u00e8re. Cela permet d’am\u00e9liorer l’exp\u00e9rience utilisateur et en m\u00eame temps d’\u00e9conomiser une charge suppl\u00e9mentaire sur le serveur.<\/p>\n

Ajax devient extr\u00eamement populaire dans le d\u00e9veloppement Web. La plupart des sites Web pr\u00e9f\u00e8rent utiliser Ajax pour charger le contenu de mani\u00e8re dynamique. Dans le d\u00e9veloppement Web pour quelques t\u00e2ches, vous devez utiliser Ajax sans deuxi\u00e8me option.<\/p>\n

Cela dit, voyons comment utiliser jQuery Ajax dans WordPress.<\/p>\n

Commencer<\/h3>\n

L’impl\u00e9mentation d’Ajax dans WordPress est simple et directe. Nous en verrons un exemple pratique. \u00c0 titre d’exemple, prenons un flux de listes d\u00e9roulantes de pays et d’\u00e9tats. Lorsque l’utilisateur s\u00e9lectionne un pays dans la liste d\u00e9roulante, tous les \u00e9tats attribu\u00e9s au pays s\u00e9lectionn\u00e9 doivent \u00eatre renseign\u00e9s dans la liste d\u00e9roulante des \u00e9tats. Ce comportement doit \u00eatre fait par Ajax.<\/p>\n

Pour y parvenir, vous aurez besoin de 2 tables – wp_countries et wp_states. Dans ces tableaux, vous devez conserver la relation un \u00e0 plusieurs entre le pays et les \u00c9tats. Reportez-vous aux captures d’\u00e9cran ci-dessous.<\/p>\n

Tableau wp_pays<\/strong><\/p>\n

\"Comment<\/a><\/p>\n

Tableau \u00e9tats_wp<\/strong><\/p>\n

\"Comment<\/a><\/p>\n

Une fois que vous \u00eates pr\u00eat avec les donn\u00e9es, cr\u00e9ez la liste d\u00e9roulante des pays en r\u00e9cup\u00e9rant les donn\u00e9es du tableau des pays comme suit.<\/p>\n

<?php\nglobal $wpdb;\n$aCountries = $wpdb->get_results( \"SELECT id, country FROM \".$wpdb->prefix.\"countries\" );\n\u00a0\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<select class=\"countries\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"\">--<?php _e('SELECT COUNTRY'); ?>--<\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($aCountries as $country) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $country->id; ?>\"><?php echo $country->country; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0<div class=\"load-state\"><\/div>\n<\/form>\n?><\/code><\/pre>\n
Nous avons ajout\u00e9 la classe ‘country’ \u00e0 la balise select qui sera utilis\u00e9e dans le code jQuery pour obtenir l’identifiant d’un pays. J’ai \u00e9galement ajout\u00e9 une div vide avec la classe ‘load-states’ \u00e0 laquelle la liste d\u00e9roulante d’\u00e9tat sera ajout\u00e9e apr\u00e8s avoir re\u00e7u une r\u00e9ponse de l’appel Ajax.<\/p>\n
jQuery Ajax dans WordPress<\/h3>\n
Ensuite, nous devons \u00e9crire un code jQuery qui donne un appel Ajax au serveur et g\u00e8re la r\u00e9ponse. Pour \u00e9crire un appel Ajax, vous devez inclure le fichier JS. Cr\u00e9ez un custom.js<\/code>fichier dans le js<\/code>r\u00e9pertoire de votre th\u00e8me actif. Ajoutez ceci custom.js<\/code>dans l’environnement WordPress en utilisant le code ci-dessous qui va \u00e0 l’int\u00e9rieur functions.php<\/code>.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_states' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Maintenant, \u00e9crivons un code jQuery qui donne un appel Ajax et ajoutons la liste d\u00e9roulante d’\u00e9tat \u00e0 la page.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '.countries', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var countryid = $(this).val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(countryid != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'get_states_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'country': countryid,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.load-state').html(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Ici, j’ai d\u00e9clar\u00e9 une data<\/code>variable qui contient une action<\/code>cl\u00e9. La valeur de cha\u00eene pour action<\/code>key doit \u00eatre orient\u00e9e t\u00e2che. Nous r\u00e9cup\u00e9rons des \u00e9tats, donc je garde son nom comme get_states_by_ajax. Les autres \u00e9l\u00e9ments de la data<\/code>variable sont les d\u00e9tails \u00e0 envoyer aux requ\u00eates Ajax. Notre objectif est de r\u00e9cup\u00e9rer un \u00e9tat bas\u00e9 sur le pays, donc je passe l’identifiant du pays avec la cl\u00e9 comme country<\/code>.<\/p>\n
Il est maintenant temps d’ex\u00e9cuter des appels Ajax \u00e0 la mani\u00e8re WordPress. Ajoutez les 2 d\u00e9clarations ci-dessous dans le functions.php<\/code>fichier de votre th\u00e8me actif .<\/p>\n
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');\nadd_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');<\/code><\/pre>\n
‘wp_ajax’ est un pr\u00e9fixe fixe lors de l’utilisation d’Ajax dans WordPress. Ensuite, ajoutez-y la valeur de l’action. Dans notre cas, il s’agit de get_states_by_ajax. Ainsi, le premier param\u00e8tre est devenu wp_ajax_get_states_by_ajax. Le deuxi\u00e8me param\u00e8tre est une fonction de rappel dans laquelle nous devons \u00e9crire notre code c\u00f4t\u00e9 serveur r\u00e9el. ‘wp_ajax_nopriv’ doit \u00eatre utilis\u00e9 lorsque vous effectuez des op\u00e9rations pour le front-end.<\/p>\n
Dans la get_states_by_ajax_callback<\/code>m\u00e9thode, \u00e9crivez le code qui renverra la liste d\u00e9roulante d’\u00e9tat. Vous pouvez d\u00e9finir cette m\u00e9thode dans functions.php<\/code>file.<\/p>\n
function get_states_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_states', 'security');\n\u00a0\u00a0\u00a0\u00a0$country = $_POST['country'];\n\u00a0\u00a0\u00a0\u00a0global $wpdb;\n\u00a0\u00a0\u00a0\u00a0$aStates = $wpdb->get_results( $wpdb->prepare( \"SELECT id, state_name FROM \".$wpdb->prefix.\"states WHERE cid = %d\", $country) );\n\u00a0\u00a0\u00a0\u00a0if ($aStates) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($aStates as $state) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $state->id; ?>\"><?php echo $state->state_name; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
La r\u00e9ponse int\u00e9gr\u00e9e au code le renverra au jQuery. Cette r\u00e9ponse, nous l’ajoutons ensuite \u00e0 l’aide de jQuery au conteneur div qui a la classe ‘load-state’.<\/p>\n
Allez sur votre page et choisissez le pays. Vous devriez voir la liste d\u00e9roulante d’\u00e9tat s’afficher pour le pays s\u00e9lectionn\u00e9.<\/p>\n
J’esp\u00e8re que vous comprenez comment utiliser Ajax sur le site WordPress. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n