ajaxurl non défini sur l'extrémité avant

25

J'essaie de créer un ajaxform sur la face avant. J'utilise le code

    jQuery.ajax(
        {
            type: "post",
            dataType: "json",
            url: ajaxurl,
            data: formData,
            success: function(msg){
                console.log(msg);
            }
        });

pour lequel je reçois une erreur

Uncaught ReferenceError: ajaxurl is not definedworklorAjaxBookForm @ 
?page_id=2:291onclick @ ?page_id=2:202

Tout en utilisant un code similaire sur le backend d'administration fonctionne. Quelle URL dois-je utiliser pour traiter la demande ajax?

dread_cat_pirate
la source
Consultez ce tutoriel. Cela peut vous aider. 1stwebdesigner.com/implement-ajax-wordpress-themes
Nilambar Sharma

Réponses:

48

Dans le backend, il y a une ajaxurlvariable globale définie par WordPress lui-même.

Cette variable n'est pas créée par WP en frontend. Cela signifie que si vous souhaitez utiliser les appels AJAX en frontend, vous devez définir cette variable par vous-même.

Le bon moyen est de l'utiliser wp_localize_script.

Supposons que vos appels AJAX soient dans un my-ajax-script.jsfichier, puis ajoutez wp_localize_script pour ce fichier JS comme ceci:

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Après avoir localisé votre fichier JS, vous pouvez utiliser un my_ajax_objectobjet dans votre fichier JS:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
Krzysiek Dróżdż
la source
2
puis-je utiliser wp_localize_scriptsans avoir à utiliser wp_enqueue_scritp?
dread_cat_pirate
1
Vous utilisez le descripteur de script dans wp_localize_script, vous devez donc utiliser wp_enqueue_script pour au moins l'un de vos scripts. Mais ... Ne pas utiliser wp_enqueue_script n'est pas une bonne idée (vous risquez des problèmes de conflits et de dépendances).
Krzysiek Dróżdż
je n'ai pas de script externe à charger, je veux juste utiliser ajaxurl pour faire un appel ajax. n'est-ce pas possible?
RT
Et où allez-vous mettre cet appel AJAX? En tant que script en ligne? C'est une très mauvaise idée ...
Krzysiek Dróżdż
j'ai un formulaire séparé, en ce que je gère la validation et sur soumettre, un appel ajax pour soumettre le formulaire avec bien sûr la manière wordpress en ajoutant un crochet. de toute façon, j'ai trouvé le moyen d'utiliser ajaxurl.
RT
33

pour utiliser ajaxurl directement, dans votre fichier plugin ajoutez ceci:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

vous pouvez ensuite utiliser la ajaxurldemande for ajax.

RT
la source
1
Cette réponse est ajaxurlsimilaire à l'utilisation par défaut. Ce qui est bien mieux que la réponse acceptée.
Abel Melquiades Callejo
vrai, mais inutile si vous l'utilisez dans un fichier .js.
Jules
1
@Jules ajaxurlest toujours disponible dans un *.jsfichier. Pour ce faire, vous devrez peut-être déclarer la ajaxurlvariable au début du chargement de la page. Une autre chose à considérer est l'appel *.jsde votre fichier externe . Le fichier externe doit être appelé APRÈS l' ajaxurla été instancié et être donné le droit valeur d'URL.
Abel Melquiades Callejo