Ajaxurl am Frontend nicht definiert

Question

Ajaxurl am Frontend nicht definiert

31

96795 2015-06-03

Ich versuche,eine Ajaxform auf der Vorderseite zuerstellen.Ichbenutze den Code

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

für dieicheinen Fehlererhalte

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

Bei Verwendung von ähnlichem Codeim Admin-Backendfunktioniert dies.Welche URLmussich verwenden,um die Ajax-Anfrage zu verarbeiten?

I am trying to create a ajaxform on the front side. I am using the code

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

for which I am getting error

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

While using similar code on the admin backend works. What url must I use to process the ajax request?

- Überprüfen Sie dieses Tutorial.Es kann Ihnen helfen.http://www.1stwebdesigner.com/implement-ajax-wordpress-themes/
  
  Check this tutorial. It may help you. http://www.1stwebdesigner.com/implement-ajax-wordpress-themes/
  - 0
  - 2015-06-03
  - Nilambar Sharma

3 Antworten

Stimmen

- 42
- 2015-09-23
Um Ajaxurl direkt zu verwenden,fügen Siein 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 den ajaxurlfüreine Ajax-Anfrage verwenden.
to use ajaxurl directly, in your plugin file add this:

add_action('wp_head', 'myplugin_ajaxurl'); function myplugin_ajaxurl() { echo '<script type="text/javascript"> var ajaxurl = "' . admin_url('admin-ajax.php') . '"; </script>'; }

you can then use the ajaxurl for ajax request.
- Quelle
- R T
- Diese Antwortmacht "Ajaxurl" ähnlich wie die Standardverwendung.Welchesist vielbesser als die akzeptierte Antwort.
  
  This answer makes `ajaxurl` similarly the same as the default usage. Which is much better than the accepted answer.
  - 2
  - 2018-12-25
  - Abel Melquiades Callejo
- stimmt,aberesistnutzlos,wenn Sieesin einer .js-Datei verwenden.
  
  true, but it's useless if you are using it in a .js file.
  - 0
  - 2019-03-20
  - Jules
- @Jules `ajaxurl`ist weiterhinin einer` * .js`-Datei verfügbar.Dazumüssen Siemöglicherweise die Variable "ajaxurl"frühzeitigbeim Laden der Seite deklarieren.Eine andere zuberücksichtigende Sacheist das Aufrufen Ihrerexternen `* .js`-Datei.Dieexterne Datei sollte ** NACH ** heißen,nachdem das Ajaxurlinstanziiert wurde,und den richtigen URL-Werterhalten.
  
  @Jules `ajaxurl` is still available in a `*.js` file. To do so, you may need to declare the `ajaxurl` variable early on of the page load. Another thing to consider is the calling of the external `*.js` file of yours. The external file should be called **AFTER** the `ajaxurl` has been instantiated and be given the right URL value.
  - 1
  - 2019-11-09
  - Abel Melquiades Callejo
- Wasistein Fehlerin der Konsole?
  
  what's an error in console?
  - 0
  - 2020-01-29
  - Dharmishtha Patel

0

2020-01-28

Ich habe unten Codein WordPress-Site verwendet.
Wir können denfolgenden Code verwenden,um Ajaxurl wiefolgteinzurichten.

 <?php echo esc_url(admin_url('admin-ajax.php')); ?>

Ich habe auchein Ajax-Beispiel hinzugefügt,wo wir die obige Zeile verwenden können.

  function setNotificationRead() {
        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            body: `action=yourFunctionsAction`,
            credentials: 'same-origin'
        }).then(response => {
            return response.json();
        }).then(data => {
            if (data.status === 'true') {
                console.log('Do something...');
            }
        });
    }

i have use below code in wordpress site.
we can use below code for setup ajaxurl like this.

<?php echo esc_url(admin_url('admin-ajax.php')); ?>

i have also added ajax example were we can use above line.

 function setNotificationRead() {
        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            body: `action=yourFunctionsAction`,
            credentials: 'same-origin'
        }).then(response => {
            return response.json();
        }).then(data => {
            if (data.status === 'true') {
                console.log('Do something...');
            }
        });
    }

Krzysiek Dróżdż · Accepted Answer · 2015-06-03

55

2015-06-03

Im Backendgibt eseine globale ajaxurl -Variable,die von WordPress selbst definiert wird.

Diese Variable wirdnicht von WPim Frontenderstellt. Wenn Sie AJAX-Aufrufeim Frontend verwendenmöchten,müssen Sie diese Variable selbst definieren.

Einegute Möglichkeit hierfürist die Verwendung von wp_localize_script.

Nehmen wir an,Ihre AJAX-Aufrufebefinden sichin der Datei my-ajax-script.js undfügen dann wp_localize_scriptfür diese JS-Datei wiefolgt 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' );

Nach dem Lokalisieren Ihrer JS-Datei können Sie das Objekt my_ajax_objectin Ihrer JS-Datei verwenden:

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

In backend there is global ajaxurl variable defined by WordPress itself.

This variable is not created by WP in frontend. It means that if you want to use AJAX calls in frontend, then you have to define such variable by yourself.

Good way to do this is to use wp_localize_script.

Let's assume your AJAX calls are in my-ajax-script.js file, then add wp_localize_script for this JS file like so:

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

After localizing your JS file, you can use my_ajax_object object in your JS file:

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

Kannich "wp_localize_script" verwenden,ohne "wp_enqueue_scritp" verwenden zumüssen?

can I use `wp_localize_script` without having to use `wp_enqueue_scritp`?
- 2
- 2015-06-03
- dread_cat_pirate
Sie verwenden das Skripthandlein wp_localize_script,dahermüssen Sie wp_enqueue_scriptfürmindestenseines Ihrer Skripte verwenden.Aber ... wp_enqueue_scriptnicht zu verwendenist keinegute Idee (Sie riskiereneinige Konflikte und Abhängigkeitsprobleme).

You use script handle in wp_localize_script, so you have to use wp_enqueue_script for at least one of your scripts. But... Not using wp_enqueue_script is not a good idea (you risk some conflicts and dependencies problems).
- 1
- 2015-06-05
- Krzysiek Dróżdż
Ich habe keinexternes Skript zum Laden,ichmöchtenur Ajaxurl verwenden,umeinen Ajax-Aufruf zutätigen.ist dasnichtmöglich

i don't have any external script to load, i just want to use ajaxurl to make an ajax call. is that not possible?
- 0
- 2015-09-23
- R T
Und wo werden Sie diesen AJAX-Anrufplatzieren?Als Inline-Skript?Esisteine sehr schlechte Idee ...

And where will you put this AJAX call? As inline script? It's a very bad idea...
- 0
- 2015-09-23
- Krzysiek Dróżdż
Ich habeein separates Formular,in demich die Validierung verwalte undbeim Sendeneinen Ajax-Aufruf zum Senden des Formularsmit natürlich WordPress-Methode durch Hinzufügeneines Hooks.Trotzdem habeich den Wegfür die Verwendung von Ajaxurlgefunden.

i've a separate form, in that i'm managing validation and on submit, an ajax call to submit form with of course wordpress way by adding hook. anyway I've figured out the way for using ajaxurl.
- 0
- 2015-09-23
- R T
Genial ... Ichbenutzeesin meinem Javascript am Frontend undfunktioniert wieein Zauber :)

Awesome... I'm using it in my Javascript on front end and works like a charm :)
- 0
- 2017-10-17
- Omer