Maison >développement back-end >tutoriel php >Comment intégrer les fonctionnalités AJAX dans un shortcode WordPress ?

Comment intégrer les fonctionnalités AJAX dans un shortcode WordPress ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-10 03:52:08535parcourir

How to Integrate AJAX Functionality within a WordPress Shortcode?

Comment utiliser AJAX dans un shortcode WordPress ?

Implémenter AJAX avec un shortcode

PHP :

Le code PHP du shortcode doit inclure le suivant :

function random_quote( $atts ) {
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt' // Default path
    ), $atts ) );

    // Retrieve quotes from file
    $array = file( $path );
    $r = rand( 0, count($array) - 1 );

    // Render shortcode output
    $output = '<div>

jQuery :

Gérez le clic sur le bouton et effectuez la requête AJAX :

jQuery('#newquote').click( function() {
    // Send AJAX request to retrieve a new quote
    $.ajax({
        type: 'POST',
        url: ajaxParams.themeURI+'js/ajax-load-quote.php',
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,'#randomquotes');
        },
        success: function(data) {
            // Replace old quote with new one
            jQuery('#randomquotes').find('p').remove();
            jQuery('#randomquotes').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,'#randomquotes');
        }
    });
    return false;
});

Comment utiliser AJAX dans WordPress Shortcodes

  1. Créer un fichier PHP :Établir une communication point entre JS et PHP (par exemple, ajax-load-quote.php).
  2. Configurer le shortcode : Écrivez le shortcode pour générer les intégrations HTML et JS/AJAX nécessaires.
  3. Charger les scripts nécessaires : Mettez en file d'attente le fichier JS requis dans Functions.php (par exemple, wp_enqueue_script).
  4. Appel AJAX en JavaScript : Utilisez jQuery, XHR ou similaire pour envoyer des requêtes AJAX depuis JS.
  5. Traitez la requête AJAX en PHP : Gérez les données, effectuez les opérations nécessaires et renvoyez les données modifiées contenu.
  6. Mettre à jour la vue dans JS : Mettez à jour le code HTML en fonction de la réponse de la requête AJAX côté serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn