ajaxurl не определен на переднем конце

25

Я пытаюсь создать ajaxform на лицевой стороне. Я использую код

    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

При использовании аналогичного кода на админке работает бэкэнд. Какой URL я должен использовать для обработки запроса AJAX?

dread_cat_pirate
источник
Проверьте этот учебник. Это может помочь вам. 1stwebdesigner.com/implement-ajax-wordpress-themes
Ниламбар Шарма

Ответы:

48

В бэкэнде есть глобальная ajaxurlпеременная, определяемая самим WordPress.

Эта переменная не создается WP в веб-интерфейсе. Это означает, что если вы хотите использовать вызовы AJAX во внешнем интерфейсе, то вам нужно определить такую ​​переменную самостоятельно.

Хороший способ сделать это - использовать wp_localize_script.

Давайте предположим, что ваши AJAX-вызовы находятся в my-ajax-script.jsфайле, а затем добавьте wp_localize_script для этого JS-файла следующим образом:

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-файла вы можете использовать my_ajax_objectобъект в вашем JS-файле:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
Krzysiek Dróżdż
источник
2
я могу использовать wp_localize_scriptбез необходимости использовать wp_enqueue_scritp?
dread_cat_pirate
1
Вы используете дескриптор скрипта в wp_localize_script, поэтому вы должны использовать wp_enqueue_script как минимум для одного из ваших скриптов. Но ... Не использовать wp_enqueue_script не очень хорошая идея (вы рискуете некоторыми конфликтами и проблемами с зависимостями).
Krzysiek Dróżdż
У меня нет внешнего скрипта для загрузки, я просто хочу использовать ajaxurl для вызова ajax. это не возможно?
RT
И куда вы положите этот вызов AJAX? Как встроенный скрипт? Это очень плохая идея ...
Krzysiek Dróżdż
У меня есть отдельная форма, в которой я управляю проверкой и передачей, вызовом ajax для отправки формы, конечно же, с помощью WordPress путем добавления ловушки. во всяком случае, я выяснил способ использования ajaxurl.
RT
33

чтобы использовать ajaxurl напрямую, добавьте в свой файл плагина:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

Затем вы можете использовать ajaxurlзапрос ajax.

RT
источник
1
Этот ответ ajaxurlаналогичен использованию по умолчанию. Что намного лучше, чем принятый ответ.
Абель Мелькиадес Каллехо
правда, но это бесполезно, если вы используете его в файле .js.
Жюль
1
@Jules ajaxurlвсе еще доступен в *.jsфайле. Для этого вам может потребоваться объявить ajaxurlпеременную в начале загрузки страницы. Еще одна вещь, которую следует учитывать, - это вызов *.jsвашего внешнего файла. Внешний файл должен называться ПОСЛЕajaxurl был экземпляр и дать правильное значение URL.
Абель Melquiades Callejo