it-swarm.com.de

ajaxurl am Frontend nicht definiert

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?

25

Im Backend gibt es eine globale ajaxurl Variable, die von WordPress selbst definiert wurde.

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

Ein guter Weg, dies zu tun, ist die Verwendung von wp_localize_script.

Nehmen wir an, Ihre AJAX -Aufrufe befinden sich in der Datei my-ajax-script.js. 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 Objekt my_ajax_object 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);
        }
    });
46

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 ajaxurl für eine Ajax-Anfrage verwenden.

23
R T