web-dev-qa-db-fra.com

Wordpress AJAX dans header.php

J'étudie actuellement Wordpress AJAX mais continue à recevoir un message d'erreur (la fonction de réussite n'est donc pas exécutée)

Actuellement, j'ai changé le header.php (du thème 20 ans) pour inclure JavaScript qui envoie AJAX Request.

<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<script type="text/javascript">

    jQuery(document).ready(function($){

    //AJAX
    $.ajax({

        type: "GET",
        dataType: "json",
        url: "<?php echo admin_url('admin-ajax.php'); ?>;",
        data: {
            action: 'xn_get_event'
        },
        success: function(response){
            alert("Yes");
        },
        error: function(response){
            alert("omg!");
        }

    }); //END OF AJAX (SEND REQUEST)
}); //END OF READY FUNCTION
</script>

Et puis dans le dossier du thème, j'ai inclus un autre fichier PHP appelé json-feed.php dans le dossier des fonctions (donc nom_thème/functions/json-feed.php) et ici j'ai inclus le code suivant:

header('Content-Type:application/json');


//Needs to include wp-load.php file! 
if(file_exists('../../../../wp-load.php')):
    include '../../../../wp-load.php';
else: //Double checking in case the path is wrong.
    include '../../../../../wp-load.php';
endif;

//AJAX Handler
add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    echo "Wow!";

}

Et puis quand je vais sur le site web, il continue à alerter "Omg! à moi et je ne sais pas pourquoi il est de retour de réponse d'erreur!

themesajax
2
wordwannabe

Il y a tons de questions sur l'utilisation d'Ajax, votre question pourrait donc être facilement marquée comme dupliquée, mais je vois tellement de GRANDES erreurs que je ne peux pas vous dire que la question est dupliquée sans expliquer vos erreurs.

  1. La Ajax dans Wordpress est gérée dans le fichier admin-ajax.php, mais vous avez correctement envoyé la demande ajax (voir le paramètre url de l'appel Ajax). Donc, vous n'avez pas besoin d'inclure wp-load.php, Wordpress est déjà chargé.
  2. Le fichier json-feed.php de votre dossier de thème n'est jamais exécuté, à moins que vous ne l'appeliez include dans le fichier functions.php ou dans un fichier descendant.
  3. Vous devez toujours quitter lorsque l'action ajax est terminée (vous n'avez pas utilisé wp_send_json et les fonctions associées qui effectuent déjà la sortie).
  4. Vous avez une faute de frappe dans le paramètre URL de la demande Ajax (voir ; à la fin).
  5. Le type de contenu spécifié dans l'en-tête repsonse ne correspond pas au type de contenu réel de la sortie de la réponse.

Pour un exemple de travail rapide, incluez ce code dans le fichier functions.php et corrigez la faute de frappe dans le paramètre URL:

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    echo 'Wow!';
    exit;

}

En outre, il est recommandé de ne pas inclure le javascript en ligne directement dans le fichier header.php ou tout autre fichier de modèle lorsque le javascrpt a des dépendances, comme votre code. Vous ne savez jamais comment les dépendances sont gérées. Par exemple, votre javascript dépend de jQuery, mais le fichier jQuery peut être déplacé vers le pied de page et votre code jQuery cessera de fonctionner car il est imprimé avant le chargement de jQuery. Utilisez les fonctions Wordpress appropriées pour inclure JavaScript et gérer les dépendances. Un code bien meilleur serait:

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    $data = array( 'message' => 'Wow!' );
    wp_send_json( $data );

}

add_action('wp_enqueue_scripts', 'cyb_enqueue_scripts');
function cyb_enqueue_scriptss() {

    //Register my script
    //Update with the correct path to javscript file
    wp_register_script('my-script', get_stylesheet_directory_uri(). '/js/my-script.js', array( 'jquery' ) );

    //Enqueue scripts and dependencies
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'my-script' );

    //Localize js variables to be used in my-script.js
    $scriptData = array(
                      'ajaxurl' => admin_url('admin-ajax.php')
                     );
    wp_localize_script( 'my-script', 'my_script_data', $scriptData );

}

Le contenu du fichier my-script.js pourrait ressembler à ceci:

jQuery(document).ready(function($){

    //AJAX
    $.ajax({

        type: "GET",
        dataType: "json",
        url: my_script_data.ajaxurl,
        data: {
            action: "xn_get_event"
        }
    })
    .done( function( response ) {
            alert( response.message );
    })
    .fail( function( response ){
            alert( "omg!" );
    });
});

Pour plus d'informations, consultez la documentation sur WP Ajax API ou sur des millions d'autres questions et exemples sur utilisant Ajax dans Wordpress .

Remarque: code non testé.

5
cybmeta