ajaxurl nie zdefiniowany w interfejsie użytkownika

25

Próbuję utworzyć ajaxform na przedniej stronie. Używam kodu

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

za co dostaję błąd

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

Podczas korzystania z podobnego kodu na zapleczu administratora działa. Jakiego adresu URL muszę użyć do przetworzenia żądania ajax?

dread_cat_pirate
źródło
Sprawdź ten samouczek. To może ci pomóc. 1stwebdesigner.com/implement-ajax-wordpress-themes
Nilambar Sharma

Odpowiedzi:

48

W backendie znajduje się ajaxurlzmienna globalna zdefiniowana przez sam WordPress.

Ta zmienna nie jest tworzona przez WP w interfejsie użytkownika. Oznacza to, że jeśli chcesz używać wywołań AJAX w interfejsie użytkownika, musisz samodzielnie zdefiniować taką zmienną.

Dobrym sposobem na to jest użycie wp_localize_script.

Załóżmy, że twoje wywołania AJAX są w my-ajax-script.jspliku, a następnie dodaj wp_localize_script do tego pliku JS w następujący sposób:

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

Po zlokalizowaniu pliku JS możesz użyć my_ajax_objectobiektu w pliku JS:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
Krzysiek Dróżdż
źródło
2
czy mogę korzystać wp_localize_scriptbez konieczności używania wp_enqueue_scritp?
dread_cat_pirate
1
Używasz uchwytu skryptu w skrypcie wp_localize_script, więc musisz użyć wp_enqueue_script dla co najmniej jednego ze swoich skryptów. Ale ... Nieużywanie wp_enqueue_script nie jest dobrym pomysłem (ryzykujesz konfliktami i problemami zależności).
Krzysiek Dróżdż
nie mam żadnego zewnętrznego skryptu do załadowania, chcę po prostu użyć ajaxurl do wykonania wywołania ajax. czy to nie jest możliwe?
RT
A gdzie umieścisz to wywołanie AJAX? Jako skrypt wbudowany? To bardzo zły pomysł ...
Krzysiek Dróżdż
Mam osobny formularz, w którym zarządzam sprawdzaniem poprawności, a po przesłaniu wywołania ajax do przesłania formularza oczywiście metodą wordpress poprzez dodanie hooka. w każdym razie wymyśliłem sposób korzystania z ajaxurl.
RT
33

aby użyć ajaxurl bezpośrednio, w pliku wtyczki dodaj to:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

możesz wtedy użyć polecenia ajaxurlajax.

RT
źródło
1
Ta odpowiedź jest ajaxurlpodobna do domyślnej. Co jest znacznie lepsze niż zaakceptowana odpowiedź.
Abel Melquiades Callejo,
prawda, ale jest to bezużyteczne, jeśli używasz go w pliku .js.
Jules
1
@Jules ajaxurljest nadal dostępny w *.jspliku. Aby to zrobić, może być konieczne zadeklarowanie ajaxurlzmiennej na początku ładowania strony. Inną rzeczą do rozważenia jest wywołanie *.jstwojego zewnętrznego pliku. Plik zewnętrzny powinien być nazywany POajaxurl została instancja i mieć odpowiednią wartość URL.
Abel Melquiades Callejo