WordPress AJAX返回0 Datatables联动下拉功能异常

故障现象 #

• Datatables组件中实现<select>联动下拉功能时，admin-ajax.php接口固定返回{"success":true,"data":"0"}
• AJAX success回调中执行alert(data)弹窗显示[object Object]，浏览器控制台无任何报错
• 后端写的测试输出<option value='test'>Test</option>完全没有出现在响应中

故障根因 #

一共3个问题叠加导致异常：

1. 前后端action参数名不匹配
   前端AJAX提交的action参数值为send_dropdown_account_data，但后端挂载WP AJAX钩子时把名称拼成了send_dropdown_account_dat（末尾少了字母a），WordPress无法匹配到对应回调函数时默认返回0。
2. 输出缓冲逻辑缺失
   就算action名匹配正确，代码中没有提前调用ob_start()开启输出缓冲，直接调用ob_get_clean()无法捕获echo的内容，拿到的空值会被wp_send_json_success自动转成字符串"0"。
3. 调试方式错误
   AJAX配置了dataType: "json"，jQuery会自动把接口返回的JSON字符串解析为JS对象，直接传入alert()只会显示[object Object]，无法看到实际返回内容，不属于接口报错。

修复代码 #

后端PHP修复 #

修正action钩子名称，简化返回逻辑，去掉不必要的输出缓冲捕获：

// 修正action名称，和前端提交的参数完全一致
add_action('wp_ajax_nopriv_send_dropdown_account_data', 'update_modification_dropdown_options');
add_action('wp_ajax_send_dropdown_account_data', 'update_modification_dropdown_options');    

function update_modification_dropdown_options()
{
    // 直接拼接需要返回的option字符串，不需要echo+ob的绕弯写法
    $output = "<option value='test'>Test</option>";
    wp_send_json_success($output);
    wp_die(); // 终止后续执行，避免多余内容污染JSON响应
}

如果确实需要用输出缓冲捕获多段输出，记得先开启缓冲：

function update_modification_dropdown_options()
{
    ob_start();
    // 这里可以放多个echo、模板引入等输出逻辑
    echo "<option value='test'>Test</option>";
    $output = ob_get_clean();
    wp_send_json_success($output);
    wp_die();
}

前端JS修复 #

调整调试逻辑，正确读取返回的JSON结构，拿到option内容后插入到目标下拉框：

$('#data-modification-table tbody').on('change', 'td select', function(e) {
  e.preventDefault();
  let $tr = $(e.target).closest('tr');

  $.ajax({
    type: "POST",
    url: ajaxurl,
    dataType: "json",
    data: {
      action: "send_dropdown_account_data",
      account_id: $tr.find('.user_account_name').val(),
      project_id: $tr.find('.user_project_name').val(),
    },
    success: function(res) {
      // 用console.log打印对象才能看到完整结构，wp_send_json_success返回格式固定为{success:布尔值, data:实际返回内容}
      console.log('接口返回内容：', res);
      if (res.success) {
        // 把返回的option字符串插入到需要联动的下拉框中，替换原有选项
        $tr.find('.user_project_name').html(res.data);
      }
    },
    error: function(req, status, err) {
      console.log('请求异常：', status, err);
    }
  });
});

验证标准 #

修改完成后清空站点缓存、浏览器缓存，触发下拉变更动作，在开发者工具网络面板中查看admin-ajax.php的响应，正常返回格式应为：

{"success":true,"data":"<option value='test'>Test<\/option>"}

此时联动下拉框会自动加载出测试选项，功能恢复正常。

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