未在前端定义ajaxurl

时间：2015-06-03 作者：dread_cat_pirate

我正在尝试在正面创建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请求？

5 个回复

最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

在后端有全局ajaxurl WordPress本身定义的变量。

此变量不是由前端的WP创建的。这意味着，如果您想在前端使用AJAX调用，那么您必须自己定义这样的变量。

这样做的好方法是使用wp_localize_script.

假设您的AJAX调用处于my-ajax-script.js 文件，然后为此JS文件添加wp\\u localize\\u脚本，如下所示：

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

SO网友:R T

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

SO网友:Gabriel Reguly

2021的方式有点不同；-）

function my_enqueue() {

    wp_enqueue_script( \'ajax-script\', get_template_directory_uri() . \'/js/my-ajax-script.js\', array(\'jquery\') );

    wp_add_inline_script( \'ajax-script\', 
        \'const myVariables = \' . json_encode( 
                                    array(
                                        \'ajaxUrl\' => admin_url( \'admin-ajax.php\' ),
                                        ) ),
        \'before\' );

}
add_action( \'wp_enqueue_scripts\', \'my_enqueue\' );

资料来源：https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

SO网友:Amit Joshi

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

SO网友:plainlyresults

我花了很多小时才弄到这个。。。以及尝试和错误。因此，我通过一个示例（从开始）分享了如何在wordpress中使用ajaxhttps://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 并改编了示例）

--使用chrome开发者工具，并从网络标签中删除缓存——如果您遇到任何错误，请查看控制台，第一个目标是访问控制台；准备好了"E；当你点击按钮，如果一切正常，你也会得到一些不错的输出！

--作为自定义html块添加到wordpress网站：

<div id="receiving_div_id">
   <p>Nothing loaded yet</p>
</div>
<button id="button_to_load_data">Get Ajax Content</button>

--添加到主题/js/按钮。js（创建js文件夹）：

   jQuery("#button_to_load_data").click(function() {
        console.log( "ready!" );
      var data = {
         \'action\'   : \'t4a_ajax_call\', // the name of your PHP function!
         \'function\' : \'show_files\',    // a random value we\'d like to pass
         \'fileid\'   : \'7\'              // another random value we\'d like to pass
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--添加到主题函数。php：

 /* custom script in theme functions.php */

/* read button.js (->my-script) and localize admin-ajax.php for my-script */
function add_my_script() {

  wp_enqueue_script( \'my-script\', 
         get_template_directory_uri() . \'/js/button.js\', 
         array ( \'jquery\' ), 
         false,
         true
  );
  
      wp_localize_script( \'my-script\', \'my_ajax_object\',
            array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) ) );

}
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );



/*ajax result */

add_action(\'wp_ajax_t4a_ajax_call\', \'t4a_ajax_call\');  // for logged in users only
add_action(\'wp_ajax_nopriv_t4a_ajax_call\', \'t4a_ajax_call\'); // for ALL users

function t4a_ajax_call(){

   echo \'Ajax call output:\';

   echo \'<pre>\';
   var_dump($_POST);
   echo \'</pre>\';

   wp_die();// this is required to terminate immediately and return a proper response
}

结束

小码农CODE

未在前端定义ajaxurl

相关推荐

如何删除默认的jQuery并在页脚中添加js？