ajaxurl이 프런트 엔드에 정의되지 않았습니다

백엔드에는 WordPress 자체에서 정의한 전역 ajaxurl 변수가 있습니다.

이 변수는 프론트 엔드에서 WP에 의해 생성되지 않습니다. 즉,프론트 엔드에서 AJAX 호출을 사용하려면 이러한 변수를 직접 정의해야합니다.

이 작업을 수행하는 좋은 방법은 wp_localize_script를 사용하는 것입니다.

AJAX 호출이 my-ajax-script.js 파일에 있다고 가정하고 다음과 같이이 JS 파일에 wp_localize_script를 추가합니다.

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

JS 파일을 현지화 한 후 JS 파일에서 my_ajax_object 객체를 사용할 수 있습니다.

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

ajaxurl을 직접 사용하려면 플러그인 파일에 다음을 추가하세요.

 add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

그런 다음 ajax 요청에 ajaxurl을 사용할 수 있습니다.

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.

Wordpress 사이트에서 아래 코드를 사용하고 있습니다.
이와 같이 ajaxurl을 설정하기 위해 아래 코드를 사용할 수 있습니다.

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

위 줄에서 사용할 수있는 ajax 예제도 추가했습니다.

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