Comment utiliser jQuery Ajax dans WordPress

Dernière mise à jour Oct 18, 2021

Teneur

Pourquoi avoir besoin de jQuery Ajax dans le site Web ?

Ajax (Asynchronous JavaScript And XML) permet à une page Web de se mettre à jour de manière asynchrone. Cela signifie que les données peuvent être envoyées et récupérées à partir d’un serveur de manière asynchrone sans interférer 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ère. Cela permet d’améliorer l’expérience utilisateur et en même temps d’économiser une charge supplémentaire sur le serveur.

Ajax devient extrêmement populaire dans le développement Web. La plupart des sites Web préfèrent utiliser Ajax pour charger le contenu de manière dynamique. Dans le développement Web pour quelques tâches, vous devez utiliser Ajax sans deuxième option.

Cela dit, voyons comment utiliser jQuery Ajax dans WordPress.

Commencer

L’implémentation d’Ajax dans WordPress est simple et directe. Nous en verrons un exemple pratique. À titre d’exemple, prenons un flux de listes déroulantes de pays et d’états. Lorsque l’utilisateur sélectionne un pays dans la liste déroulante, tous les états attribués au pays sélectionné doivent être renseignés dans la liste déroulante des états. Ce comportement doit être fait par Ajax.

Pour y parvenir, vous aurez besoin de 2 tables – wp_countries et wp_states. Dans ces tableaux, vous devez conserver la relation un à plusieurs entre le pays et les États. Reportez-vous aux captures d’écran ci-dessous.

Tableau wp_pays

Tableau états_wp

Une fois que vous êtes prêt avec les données, créez la liste déroulante des pays en récupérant les données du tableau des pays comme suit.

<?php
global $wpdb;
$aCountries = $wpdb->get_results( "SELECT id, country FROM ".$wpdb->prefix."countries" );
 
<form method="post">
    <select class="countries">
        <option value="">--<?php _e('SELECT COUNTRY'); ?>--</option>
        <?php foreach ($aCountries as $country) { ?>
              <option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
        <?php } ?>
    </select>
    <div class="load-state"></div>
</form>
?>

Nous avons ajouté la classe ‘country’ à la balise select qui sera utilisée dans le code jQuery pour obtenir l’identifiant d’un pays. J’ai également ajouté une div vide avec la classe ‘load-states’ à laquelle la liste déroulante d’état sera ajoutée après avoir reçu une réponse de l’appel Ajax.

jQuery Ajax dans WordPress

Ensuite, nous devons écrire un code jQuery qui donne un appel Ajax au serveur et gère la réponse. Pour écrire un appel Ajax, vous devez inclure le fichier JS. Créez un custom.jsfichier dans le jsrépertoire de votre thème actif. Ajoutez ceci custom.jsdans l’environnement WordPress en utilisant le code ci-dessous qui va à l’intérieur functions.php.

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
  
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_states' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
  
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

Maintenant, écrivons un code jQuery qui donne un appel Ajax et ajoutons la liste déroulante d’état à la page.

custom.js

jQuery(function($) {
    $('body').on('change', '.countries', function() {
        var countryid = $(this).val();
        if(countryid != '') {
            var data = {
                'action': 'get_states_by_ajax',
                'country': countryid,
                'security': blog.security
            }
 
            $.post(blog.ajaxurl, data, function(response) {
                 $('.load-state').html(response);
            });
        }
    });
});

Ici, j’ai déclaré une datavariable qui contient une actionclé. La valeur de chaîne pour actionkey doit être orientée tâche. Nous récupérons des états, donc je garde son nom comme get_states_by_ajax. Les autres éléments de la datavariable sont les détails à envoyer aux requêtes Ajax. Notre objectif est de récupérer un état basé sur le pays, donc je passe l’identifiant du pays avec la clé comme country.

Il est maintenant temps d’exécuter des appels Ajax à la manière WordPress. Ajoutez les 2 déclarations ci-dessous dans le functions.phpfichier de votre thème actif .

add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');

‘wp_ajax’ est un préfixe 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ètre est devenu wp_ajax_get_states_by_ajax. Le deuxième paramètre est une fonction de rappel dans laquelle nous devons écrire notre code côté serveur réel. ‘wp_ajax_nopriv’ doit être utilisé lorsque vous effectuez des opérations pour le front-end.

Dans la get_states_by_ajax_callbackméthode, écrivez le code qui renverra la liste déroulante d’état. Vous pouvez définir cette méthode dans functions.phpfile.

function get_states_by_ajax_callback() {
    check_ajax_referer('load_states', 'security');
    $country = $_POST['country'];
    global $wpdb;
    $aStates = $wpdb->get_results( $wpdb->prepare( "SELECT id, state_name FROM ".$wpdb->prefix."states WHERE cid = %d", $country) );
    if ($aStates) {
        ?>
        <select>
            <?php
            foreach ($aStates as $state) {
                ?>
                <option value="<?php echo $state->id; ?>"><?php echo $state->state_name; ?></option>
                <?php
            }
            ?>
        </select>
        <?php
    }
    wp_die();
}

La réponse intégrée au code le renverra au jQuery. Cette réponse, nous l’ajoutons ensuite à l’aide de jQuery au conteneur div qui a la classe ‘load-state’.

Allez sur votre page et choisissez le pays. Vous devriez voir la liste déroulante d’état s’afficher pour le pays sélectionné.

J’espère que vous comprenez comment utiliser Ajax sur le site WordPress. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net