問題描述

我正試圖在前面創建一個 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 請求?

最佳解決方案

在後端有一個由 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);
        }
    });

次佳解決方案

直接使用 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 請求。

參考文獻

注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。