ajaxurl não definido no front end

25

Estou tentando criar um ajaxform na frente. Eu estou usando o código

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

pelo qual estou recebendo erro

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

Enquanto estiver usando código semelhante no back-end do administrador, funciona. Qual URL devo usar para processar a solicitação ajax?

dread_cat_pirate
fonte
Verifique este tutorial. Isso pode ajudá-lo. 1stwebdesigner.com/implement-ajax-wordpress-themes
Nilambar

Respostas:

48

No back-end, há uma ajaxurlvariável global definida pelo próprio WordPress.

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

Uma boa maneira de fazer isso é usar wp_localize_script.

Vamos supor que suas chamadas AJAX estejam no my-ajax-script.jsarquivo e adicione wp_localize_script para este arquivo JS da seguinte maneira:

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 my_ajax_objectobjeto no seu arquivo JS:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
Krzysiek Dróżdż
fonte
2
posso usar wp_localize_scriptsem ter que usar wp_enqueue_scritp?
Dread_cat_pirate
11
Você usa o identificador de script em wp_localize_script, portanto, é necessário usar wp_enqueue_script para pelo menos um de seus scripts. Mas ... Não é recomendável não usar wp_enqueue_script (você corre o risco de ter problemas com conflitos e dependências).
Krzysiek Drozdz
Eu não tenho nenhum script externo para carregar, eu só quero usar ajaxurl para fazer uma chamada ajax. isso não é possível?
RT
E onde você colocará essa chamada AJAX? Como script embutido? É uma péssima idéia ...
Krzysiek Dróżdż
Eu tenho um formulário separado, em que estou gerenciando a validação e, ao enviar, uma chamada ajax para enviar o formulário com o curso do wordpress, adicionando gancho. de qualquer maneira eu descobri o caminho para usar ajaxurl.
RT
33

Para usar o ajaxurl diretamente, no seu arquivo de plugin, adicione:

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 ajaxurlsolicitação para ajax.

RT
fonte
11
Essa resposta faz ajaxurlda mesma forma o uso padrão. O que é muito melhor do que a resposta aceita.
Abel Melquiades Callejo
true, mas é inútil se você o estiver usando em um arquivo .js.
Jules
11
@Jules ajaxurlainda está disponível em um *.jsarquivo. Para fazer isso, pode ser necessário declarar a ajaxurlvariável no início do carregamento da página. Outra coisa a considerar é a chamada do seu *.jsarquivo externo . O arquivo externo deve ser chamado APÓS a ajaxurlinstanciação e receber o valor correto da URL.
Abel Melquiades Callejo