WordPress通过AJAX向自定义REST API发送JSON返回空对象的问题

问题场景 #

尝试向自定义WordPress REST API端点发送JSON数据，期望端点返回发送的数据，但当前请求后得到空对象。以下是原代码：

原PHP代码 #

define( 'BRIGHTBRID_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

//Localize/register/enqueue javascript file
add_action( 'init', 'bbwd_enqueu' );
function bbwd_enqueu() {
   wp_register_script( "bright-bridge-custom", BRIGHTBRID_PLUGIN_URL.'assets/brightbridgeweb.js', array('jquery'));
   wp_localize_script( 'bright-bridge-custom', 'bbwdAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'bright-bridge-custom' );
}

//Add custom REST Endpoint
add_action( 'rest_api_init', function($data) {
  register_rest_route( 'bright-bridge-custom-code/v1', '/test', [
    'methods' => 'POST',
    'callback' => 'test',
  ] );
} );
function test($data){
    return $data;
}

//button to exicute ajax request to REST API 
add_shortcode( 'bp_testing', 'bp_test' );
function bp_test(){
    return "<button onclick='testClick()'>Test Me</h2>";
}

原JavaScript代码 #

function testClick(){
    let data = ["test", "Test2"]
    
    jQuery.ajax({
            url: window.location.origin+'/wp-json/bright-bridge-custom-code/v1/test', 
            type: "POST",
            data : data,
            success:function(result){
                    console.log(result);
                    },
            timeout: 0,
            error:function(error){
                console.log(error);
            }
        });
}

问题原因 #

1. 请求格式不匹配：jQuery默认会将data转为application/x-www-form-urlencoded格式，若要传递JSON需明确设置请求头并转成JSON字符串；同时原PHP回调直接返回WP_REST_Request对象，不会自动提取请求参数。
2. 代码细节错误：短代码里按钮标签闭合错误（用</h2>代替</button>）；REST路由缺少权限回调，可能触发WordPress的权限拦截；JS硬拼URL不够灵活，易因站点配置变化失效。

修正后的代码 #

修正后的PHP代码 #

define( 'BRIGHTBRID_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

// 注册、本地化并加载脚本
add_action( 'init', 'bbwd_enqueu' );
function bbwd_enqueu() {
    wp_register_script( 
        "bright-bridge-custom", 
        BRIGHTBRID_PLUGIN_URL.'assets/brightbridgeweb.js', 
        array('jquery')
    );
    // 本地化REST根URL与权限非验，提升灵活性与安全性
    wp_localize_script( 
        'bright-bridge-custom', 
        'bbwdApi', 
        array( 
            'restUrl' => get_rest_url(),
            'nonce' => wp_create_nonce('wp_rest')
        )
    );        

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'bright-bridge-custom' );
}

// 注册自定义REST路由
add_action( 'rest_api_init', function() {
    register_rest_route( 
        'bright-bridge-custom-code/v1', 
        '/test', 
        [
            'methods' => 'POST',
            'callback' => 'test_api_callback',
            'permission_callback' => function() { // 设置权限回调，此处允许所有用户访问（可按需调整）
                return true;
            }
        ] 
    );
} );

// API回调函数：提取并返回请求参数
function test_api_callback($data){
    // 针对JSON格式请求提取参数
    $request_data = $data->get_json_params();
    // 若使用form-urlencoded格式，替换为$request_data = $data->get_params();
    return $request_data ?: array('message' => '未接收到数据');
}

// 生成测试按钮的短代码
add_shortcode( 'bp_testing', 'bp_test' );
function bp_test(){
    return "<button onclick='testClick()'>Test Me</button>"; // 修正标签闭合错误
}

修正后的JavaScript代码 #

function testClick(){
    let data = ["test", "Test2"]
    
    jQuery.ajax({
        url: bbwdApi.restUrl + 'bright-bridge-custom-code/v1/test', // 使用本地化REST URL
        type: "POST",
        contentType: "application/json", // 明确告知服务器请求格式为JSON
        data : JSON.stringify(data), // 将数组转为JSON字符串
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-WP-Nonce', bbwdApi.nonce); // 携带权限非验，通过WordPress安全验证
        },
        success:function(result){
            console.log(result);
        },
        timeout: 0,
        error:function(error){
            console.log(error);
        }
    });
}

关键说明 #

• 请求格式规范：必须设置contentType: "application/json"并将数据转为JSON字符串，确保服务器正确解析JSON数据；
• 安全验证：添加X-WP-Nonce请求头，配合WordPress的REST非验机制，避免无权限请求被拦截；
• 参数提取：PHP回调中使用get_json_params()（JSON请求）或get_params()（form格式请求）提取实际参数，而非直接返回请求对象；
• URL灵活性：使用get_rest_url()本地化REST根URL，避免因站点URL配置变化导致请求失败。

内容的提问来源于stack exchange，提问作者Ben Pinales Bright Bridge