ajaxurl não definido no front end

23

Estou tentando criar um ajaxform no lado da frente. Eu estou usando o código

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

para o qual estou recebendo o erro

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

Ao usar um código semelhante no back-end de administração, funciona. Qual url devo usar para processar a solicitação do ajax?

    
por dread_cat_pirate 03.06.2015 / 09:26
fonte

2 respostas

39

No backend existe uma variável global ajaxurl definida pelo próprio WordPress.

Esta variável não é criada pelo WP no frontend. Isso significa que, se você quiser usar as chamadas AJAX no frontend, terá que definir essa variável sozinho.

Uma boa maneira de fazer isso é usar wp_localize_script .

Vamos supor que suas chamadas AJAX estejam no arquivo my-ajax-script.js e, em seguida, adicione wp_localize_script para este arquivo JS:

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' );

Depois de localizar seu arquivo JS, você pode usar o objeto my_ajax_object em seu arquivo JS:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
    
por Krzysiek Dróżdż 03.06.2015 / 09:42
fonte
19

para usar ajaxurl diretamente, no seu arquivo de plugins adicione isto:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

você pode usar a solicitação ajaxurl para ajax.

    
por R T 23.09.2015 / 09:28
fonte