web-dev-qa-db-fra.com

Comment charger Ajax dans Wordpress

Je suis habitué à utiliser ajax de manière ordinaire avec jQuery.
Je l'ai joué pendant un certain temps, mais je ne comprends pas ce dont Wordpress a besoin pour le faire fonctionner ...
Ce que j'ai ici est tiré d'un tutoriel ou d'un article.
C'est dans functions.php (dans un thème enfant):

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
   wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');

Le jQuery lui-même se charge et fonctionne correctement.

J'ai essayé un ajax de base comme le suivant:

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});

En plus de cela, je ne sais pas comment je peux tester pour voir s'il est même correctement chargé pour commencer ...

Toute aide ici serait appréciée.

MODIFIER:
Dans Firebug, cette erreur:

ReferenceError: ajax_script is not defined
       url:   ajax_script.ajaxurl,
phpjqueryajaxwordpress
24
grai

Conformément à votre demande, j'ai mis ceci dans une réponse pour vous.

Comme Hieu Nguyen l'a suggéré dans sa réponse, vous pouvez utiliser la variable javascript ajaxurl pour référencer le fichier admin-ajax.php. Cependant, cette variable n'est pas déclarée sur le frontend. Il est simple de déclarer cela sur le front-end, en mettant ce qui suit dans le header.php de votre thème.

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

Comme décrit dans la documentation Wordpress AJAX , vous avez deux hooks différents - wp_ajax_ (action) et wp_ajax_nopriv_ (action). La différence entre ceux-ci est:

  • wp_ajax_ (action): Ceci est déclenché si l'appel ajax est effectué depuis l'intérieur du panneau d'administration.
  • wp_ajax_nopriv_ (action): Ceci est déclenché si l'appel ajax est effectué à partir de l'extrémité avant du site Web.

Tout le reste est décrit dans la documentation liée ci-dessus. Bon codage!

P.S. Voici un exemple qui fonctionne devrait. (Je n'ai pas testé)

Front end :

<script type="text/javascript">
    jQuery.ajax({
        url: ajaxurl,
        data: {
            action: 'my_action_name'
        },
        type: 'GET'
    });
</script>

Backend :

<?php
    function my_ajax_callback_function() {
        // Implement ajax function here
    }
    add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' );    // If called from admin panel
    add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' );    // If called from front end
?>

[~ # ~] mise à jour [~ # ~] Même s'il s'agit d'une ancienne réponse, il semble que les gens continuent de se féliciter - ce qui est formidable ! Je pense que cela peut être utile à certaines personnes.

WordPress a une fonction wp_localize_script . Cette fonction prend un tableau de données comme troisième paramètre, destiné à être des traductions, comme le suivant:

var translation = {
    success: "Success!",
    failure: "Failure!",
    error: "Error!",
    ...
};

Donc, cela charge simplement un objet dans la balise HTML head. Cela peut être utilisé de la manière suivante:

Backend :

wp_localize_script( 'FrontEndAjax', 'ajax', array(
    'url' => admin_url( 'admin-ajax.php' )
) );

L'avantage de cette méthode est qu'elle peut être utilisée dans les deux thèmes ET les plugins, car vous ne codez pas en dur la variable URL ajax dans le thème.

Sur le front-end, l'URL est désormais accessible via ajax.url, plutôt que simplement ajaxurl dans les exemples précédents.

48
Shane

Tout d'abord, vous devez lire attentivement cette page http://codex.wordpress.org/AJAX_in_Plugins

Deuxièmement, ajax_script N'est pas défini, vous devez donc passer à: url: ajaxurl. Je ne vois pas votre function1() dans le code ci-dessus mais vous pouvez déjà le définir dans un autre fichier.

Et enfin, apprenez à déboguer les appels ajax en utilisant Firebug, le réseau et l'onglet console seront vos amis. Du côté PHP, print_r() ou var_dump() seront vos amis.

6
Hieu Nguyen

Utilisez wp_localize_script et passez l'url ici:

wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );

puis à l'intérieur de js, vous pouvez l'appeler par

admin_url.ajax_url
2
Goran Jakovljevic

Personnellement, je préfère faire ajax en wordpress de la même manière que je ferais ajax sur n'importe quel autre site. Je crée un fichier php de processeur qui gère toutes mes demandes ajax et utilise simplement cette URL. est, en raison de htaccess pas exactement possible dans wordpress donc je fais ce qui suit.

1.dans mon fichier htaccess qui vit dans mon dossier wp-content j'ajoute ci-dessous ce qui est déjà là

<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>

Dans ce cas, mon fichier de processeur s'appelle forms.php - vous le mettriez dans votre dossier wp-content/themes/themeName avec tous vos autres fichiers tels que header.php footer.php etc ... il vit juste dans votre thème racine.

2.) Dans mon code ajax, je peux ensuite utiliser mon URL comme ceci

$.ajax({
    url:'/wp-content/themes/themeName/forms.php',
    data:({
        someVar: someValue
    }),
    type: 'POST'
});

évidemment, vous pouvez ajouter n'importe laquelle de vos choses avant, succès ou type d'erreur que vous souhaitez ... mais oui, c'est (je crois) la manière la plus simple de le faire parce que vous évitez toute la sottise de dire wordpress dans 8 endroits différents ce qui va se passer et cela vous évite également de faire d'autres choses que vous voyez faire par les gens où ils mettent du code js au niveau de la page afin qu'ils puissent plonger dans php où je préfère garder mes fichiers js séparés.

2
Jason Boerner