WordPress中JQuery按钮调用PHP数据库函数遇AJAX 404错误

问题概述 #

点击按钮时AJAX请求/public/class-lolak9-controller-public.php返回404，add_data函数的错误日志无法写入，但直接调用该函数功能正常。

相关代码片段 #

前端JS（插件路径/public/js/lolak9-training-public.js）

jQuery("#add_data_button").click(function () {
        console.log("Add Record button pressed.");
        jQuery.ajax({
            method: 'post',
            url: '/public/class-lolak9-controller-public.php',
            data: {
                action: 'add_data'
            },
            success: function (new_record_id) {
                console.dir(new_record_id);
            },
            dataType: "json"
        }).fail();
    });

PHP控制器函数（插件路径/public/class-lolak9-controller-public.php）

public function add_data() {
    
        if (isset($_GET)) {
            if (defined('DOING_AJAX') && DOING_AJAX) {

                $lolak9_core = new Lolak9_Training_Core($this->plugin_name, $this->version);

                if (!$lolak9_core->get_plugin_activation_state()) {
                    return;
                }
                error_log('Made it to add_data function.'); 

         // 因篇幅省略若干代码
 
                $new_record_id = $this->wpdb->insert_id;
                
                return $new_record_id;
            
                wp_die(); //Added to get proper output.
            }
            die();
        }

钩子配置（插件路径/include/class-lolak9-training.php）

private function define_public_hooks() {
...
   $plugin_controller = new LoLaK9_Controller_Public($this->get_plugin_name(), $this->get_version());
               
   $this->loader->add_action('wp_ajax_call_add_data_button', $plugin_controller, 'add_data');
   $this->loader->add_action('wp_ajax_nopriv_call_add_data_button', $plugin_controller, 'add_data');
}                  

核心问题排查点 #

• AJAX请求URL不符合WordPress规范：WordPress的AJAX请求必须通过wp-admin/admin-ajax.php入口，直接请求插件控制器文件会因为路径错误返回404（站点根目录的/public和插件内的public不是同一个路径）。
• Action参数与钩子名称不匹配：注册的钩子是wp_ajax_call_add_data_button，但前端AJAX的action参数是add_data，两者无法对应，导致无法触发目标函数。
• 请求方法与逻辑判断冲突：前端用POST方法，但PHP函数里判断isset($_GET)，逻辑冗余且可能导致后续判断失效，应该直接检查AJAX标识和action参数。
• wp_die()位置错误：return $new_record_id之后的wp_die()永远不会执行，AJAX请求无法正常终止，会返回异常结果。
• 相对路径不可靠：前端使用的/public/...相对路径是基于站点根目录的，无法正确指向插件内部的控制器文件。

修复方案示例 #

1. 修正前端AJAX代码：

jQuery("#add_data_button").click(function () {
        console.log("Add Record button pressed.");
        jQuery.ajax({
            method: 'post',
            url: '/wp-admin/admin-ajax.php', // WordPress标准AJAX入口
            data: {
                action: 'call_add_data_button' // 与钩子名称中的action部分保持一致
            },
            success: function (response) {
                console.dir(response.data);
            },
            error: function(xhr) {
                console.log(xhr.responseText); // 打印错误信息辅助排查
            },
            dataType: "json"
        });
    });

2. 修正PHP函数逻辑：

public function add_data() {
    // 验证AJAX请求及action参数匹配
    if (defined('DOING_AJAX') && DOING_AJAX && isset($_POST['action']) && $_POST['action'] === 'call_add_data_button') {
        $lolak9_core = new Lolak9_Training_Core($this->plugin_name, $this->version);

        if (!$lolak9_core->get_plugin_activation_state()) {
            wp_send_json_error('插件未激活');
        }
        error_log('Made it to add_data function.'); 

        // 省略业务代码
 
        $new_record_id = $this->wpdb->insert_id;
        
        wp_send_json_success($new_record_id); // 返回JSON数据并自动终止请求
    }
    wp_die();
}

内容的提问来源于stack exchange，提问作者Weaverita