WP enqueue 脚本顺序和本地化错误，需要挂钩吗？

Question

以下代码产生错误：

注意：wp_enqueue_script 调用不正确。在 wp_enqueue_scripts、admin_enqueue_scripts 或 login_enqueue_scripts 挂钩之前，不应注册或排队脚本和样式。此通知由 waitlist_update_call 句柄触发。有关更多信息，请参阅 WordPress 中的调试。 （此消息是在版本 3.3.0 中添加的。）在 /home/food/domains/xyz.com/public_html/wp-includes/functions.php 的第 5225 行“

它还在控制台中显示错误：
POST https://theste.com/wp-admin/admin-ajax.php 400 (Bad Request)

我的函数文件中的 PHP 代码

wp_enqueue_script( 'update_call', 
                    get_theme_file_uri( '/assets/js/update_call.js' ), 
                    array('jquery'), null, true );
wp_localize_script('update_call', 'my_ajax', 
                   array('ajax_url' => admin_url('admin-ajax.php')));

//calls Waitinglist data and creates table
add_action('wp_ajax_function_1', 'update_function'); // logged in user can make a call
add_action('wp_ajax_nopriv_function_1', 'update'); // non logged in user can make a call

function update_function() {
    global $wpdb;
    $results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table_name' SET `currentstatus` =
    'myupdate1' WHERE ID = '1'"));
    die($results);
}

编辑 1：

我试图直接调用它。请原谅我的新奇。好吧，下面的拳头解决了 Enqueue 问题，但 POST 400 错误仍然存​​在。错误是

POST https://x.com/wp-admin/admin-ajax.php 400 (Bad Request)

当点击我应该触发的按钮时，我得到 -

Uncaught ReferenceError: update_functionis not defined
    at HTMLButtonElement.onclick

我已将函数文件中的 PHP 更改为：

function my_scripts() {   
wp_enqueue_script( 'update_call', get_theme_file_uri( '/assets/js/update_call.js' ), array('jquery'), null, true );
wp_localize_script('update_call', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
//calls Waitinglist data and creates table
}
add_action('wp_enqueue_scripts', 'my_scripts');

add_action('wp_ajax_function_1', 'waitlist_update'); // logged in user can make a call

function waitlist_update() {
    global $wpdb;
    $results = $wpdb->query( $wpdb->prepare("UPDATE 'wp_wpdatatable_4' SET `currentstatus` = 
    'myupdate1' WHERE wdt_ID = '1'"));
    die($results);

}

单独的 JS 文件是：

// JavaScript Document
jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    action: 'waitlist_update',
    success: function(data){
        // callback function
    }
});

而 HTML 是：

<button class="seat-btn" ID="update" onclick="update_function()">Go!</button>

Answer 1

WordPress 提供了正确地将脚本排入队列的钩子。

您可能直接调用了 enqueue 方法。应该是wp_enqueue_scripts钩子的动作回调。

function my_scripts() {    
wp_enqueue_script('update-call', get_template_directory_uri() . '/assets/js/update_call.js', array('jquery'), false, true);
wp_localize_script('update-call', 'my_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'my_scripts');

还有，

//calls Waitinglist data and creates table
add_action('wp_ajax_function_1', 'update_function'); // logged in user can make a call
add_action('wp_ajax_nopriv_function_1', 'update_function'); // non logged in user can make a call

如果您在旧问题中查看我之前的answer。 function_1 是 AJAX 调用请求的动作，update_function 是触发动作时我们应该调用的函数名。触发动作时未登录的用户会根据你上面的代码调用函数update，这是不正确的。

如果您只想允许已登录的用户发出此请求，您可以删除为未登录用户附加的第二个操作。

add_action('wp_ajax_nopriv_function_1', 'update_function'); // notice the nopriv?

注意： ajax 动作名称应与动作挂钩匹配。

jQuery.ajax({
//...
data: {
  action: 'action_name'
}
});

// The action name should be same wp_ajax_{action_name} from whatever defined in jQuery action 
add_action('wp_ajax_action_name', 'update_function')