Ajaxurl am Frontend nicht definiert

25

Ich versuche, eine Ajaxform auf der Vorderseite zu erstellen. Ich benutze den Code

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

wofür bekomme ich fehler

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

Bei Verwendung von ähnlichem Code auf dem Admin-Backend funktioniert. Welche URL muss ich verwenden, um die Ajax-Anfrage zu verarbeiten?

dread_cat_pirate
quelle
Überprüfen Sie dieses Tutorial. Es kann dir helfen. 1stwebdesigner.com/implement-ajax-wordpress-themes
Nilambar

Antworten:

48

Im Backend gibt es eine globale ajaxurlVariable, die von WordPress selbst definiert wird.

Diese Variable wird nicht von WP im Frontend erstellt. Dies bedeutet, dass Sie, wenn Sie AJAX-Aufrufe im Frontend verwenden möchten, diese Variablen selbst definieren müssen.

Guter Weg, dies zu tun, ist zu verwenden wp_localize_script.

Nehmen wir an, Ihre AJAX-Aufrufe befinden sich in my-ajax-script.jsfile. Fügen Sie dann wp_localize_script für diese JS-Datei wie folgt hinzu:

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

Nachdem Sie Ihre JS-Datei lokalisiert haben, können Sie das my_ajax_objectObjekt in Ihrer JS-Datei verwenden:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
Krzysiek Dróżdż
quelle
2
kann ich verwenden, wp_localize_scriptohne verwenden zu müssen wp_enqueue_scritp?
dread_cat_pirate
1
Sie verwenden das Skripthandle in wp_localize_script, sodass Sie wp_enqueue_script für mindestens eines Ihrer Skripte verwenden müssen. Aber ... Es ist keine gute Idee, wp_enqueue_script nicht zu verwenden (Sie riskieren einige Konflikte und Probleme mit Abhängigkeiten).
Krzysiek Dróżdż
Ich habe kein externes Skript zu laden, ich möchte nur Ajaxurl verwenden, um einen Ajax-Aufruf zu tätigen. ist das nicht möglich
RT
Und wo werden Sie diesen AJAX-Anruf platzieren? Als Inline-Skript? Es ist eine sehr schlechte Idee ...
Krzysiek Dróżdż
Ich habe ein separates Formular, in dem ich die Validierung verwalte und beim Absenden einen Ajax-Aufruf zum Absenden des Formulars mit WordPress durch Hinzufügen eines Hooks. Trotzdem habe ich herausgefunden, wie man Ajaxurl benutzt.
RT
33

Um Ajaxurl direkt zu verwenden, fügen Sie in Ihrer Plugin-Datei Folgendes hinzu:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

Sie können dann die ajaxurlfür Ajax-Anforderung verwenden.

RT
quelle
1
Diese Antwort entspricht in ajaxurletwa der Standardverwendung. Welches ist viel besser als die akzeptierte Antwort.
Abel Melquiades Callejo
stimmt, aber es ist nutzlos, wenn Sie es in einer .js-Datei verwenden.
Jules
1
@Jules ajaxurlist noch in einer *.jsDatei verfügbar . Dazu müssen Sie möglicherweise die ajaxurlVariable zu einem frühen Zeitpunkt beim Laden der Seite deklarieren . Eine weitere zu berücksichtigende Sache ist das Aufrufen der externen *.jsDatei von Ihnen. Die externe Datei soll aufgerufen werden , NACHDEM die ajaxurlinstanziiert wurde und den richtigen URL - Wert angegeben werden.
Abel Melquiades Callejo