WordPress前端Widget中AJAX请求失败问题求助

一、核心配置错误导致的400与返回'0'问题 #

1. 未覆盖未登录用户的AJAX回调 #

WordPress AJAX 区分登录/未登录用户，仅注册wp_ajax_{action}会导致未登录用户请求返回400+0。必须同时注册两个钩子：

// 正确注册方式
add_action('wp_ajax_my_widget_action', 'my_widget_ajax_callback');
add_action('wp_ajax_nopriv_my_widget_action', 'my_widget_ajax_callback');

2. 脚本本地化缺失关键参数 #

前端必须获取ajaxurl和验证用的nonce，否则会触发权限校验失败：

// 主插件文件中注册并本地化脚本
function my_widget_enqueue_scripts() {
    wp_enqueue_script(
        'my-widget-script',
        plugin_dir_url(__FILE__) . 'script.js',
        array('jquery'),
        '1.0',
        true
    );
    // 传递AJAX必要参数到前端
    wp_localize_script('my-widget-script', 'MyWidgetAjax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_widget_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'my_widget_enqueue_scripts');

3. 前端请求未正确携带参数 #

• 原生JS请求修复：

document.querySelector('#widget-submit-btn').addEventListener('click', () => {
    fetch(MyWidgetAjax.ajaxurl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-WP-Nonce': MyWidgetAjax.nonce
        },
        body: new URLSearchParams({
            action: 'my_widget_action', // 必须与后端钩子后缀一致
            payload: 'your-data'
        })
    })
    .then(res => res.text())
    .then(console.log)
    .catch(console.error);
});

• jQuery请求修复：

jQuery('#widget-submit-btn').on('click', () => {
    jQuery.post(MyWidgetAjax.ajaxurl, {
        action: 'my_widget_action',
        _wpnonce: MyWidgetAjax.nonce,
        payload: 'your-data'
    }, (res) => console.log(res))
    .fail(xhr => console.error(xhr.responseText));
});

二、500内部服务器错误排查（jQuery请求专属） #

500错误是服务器端代码异常，重点检查AJAX回调函数：

1. 语法错误：检查是否有未闭合的括号、未定义变量
2. 权限与校验：必须先验证nonce，非法请求直接终止：

function my_widget_ajax_callback() {
    // 验证nonce
    if (!wp_verify_nonce($_POST['_wpnonce'], 'my_widget_nonce')) {
        wp_die('Invalid request');
    }
    // 业务逻辑处理
    $payload = $_POST['payload'] ?? '';
    echo 'Processed: ' . $payload;
    // 必须终止输出，避免额外返回0
    wp_die();
}

3. 依赖错误：检查是否调用了未加载的函数（如未激活的插件函数）
4. 数据库操作：$wpdb调用需确保SQL语句合法，避免语法错误

三、Widget类的特殊注意事项 #

• 脚本注册必须使用wp_enqueue_scripts钩子（而非后台用的admin_enqueue_scripts）
• Widget渲染时，按钮ID需添加唯一标识（比如用Widget实例ID），避免多实例冲突

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