프론트 엔드에 정의되지 않은 ajaxurl

앞면에 아약스 폼을 만들려고합니다. 코드를 사용하고 있습니다

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

내가 오류가 발생했습니다.

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

관리자 백엔드에서 유사한 코드를 사용하는 동안 작동합니다. ajax 요청을 처리하려면 어떤 URL을 사용해야합니까?

백엔드에는 ajaxurlWordPress 자체에 의해 정의 된 전역 변수 가 있습니다.

이 변수는 프론트 엔드에서 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);
        }
    });

플러그인 파일에서 ajaxurl을 직접 사용하려면 다음을 추가하십시오.

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

그런 다음 ajaxurlajax 요청에 사용할 수 있습니다 .