WordPress原生JS实现Ajax请求后无法获取服务端响应问题咨询

问题原因 #

• 缺少未登录用户的Ajax钩子：你当前只注册了wp_ajax_my_action_send_receive钩子，这个仅对登录后的WordPress后台用户生效，如果是前台未登录状态发起请求，WordPress不会触发你的回调函数，默认返回空内容。
• 回调函数逻辑有执行漏洞：如果$_POST['SENDTEXT']未被正确识别到，函数不会输出任何内容就直接执行exit，最终返回空响应。
• 请求地址解析错误：如果是前台页面调用，相对路径的admin-ajax.php可能解析错误，导致请求到不存在的地址返回空内容。
• 可选优化：回调函数中exit先于wp_die()执行，wp_die()是WordPress官方推荐的Ajax请求终止方法，可以避免不必要的后续输出，不过这不是你当前空响应的核心原因。

修复方案 #

1. 修正functions.php代码 #

<?php 
// 同时支持登录用户和未登录用户的Ajax请求
add_action( 'wp_ajax_my_action_send_receive', 'send_receive' );
add_action( 'wp_ajax_nopriv_my_action_send_receive', 'send_receive' );

function send_receive() {
    if(isset($_POST['SENDTEXT'])){
        $sendtext = $_POST['SENDTEXT'];
        echo $sendtext;
    } else {
        // 调试用，参数未拿到时输出提示，排查问题后可以删除
        echo '未收到SENDTEXT参数';
    }
    // 统一用WordPress推荐的wp_die()终止请求，代替exit
    wp_die();
}
?>

2. 修正JS代码（含调试逻辑） #

var sendtext = "sendreceive";
var formData = new FormData();
formData.append("SENDTEXT", sendtext);
formData.append("action", "my_action_send_receive"); 

var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
  if (this.readyState==4) {
    // 控制台打印完整状态和响应，方便排查
    console.log('状态码：', this.status);
    console.log('响应内容：', this.responseText);
    if (this.status==200) {
      alert("response from server"+this.responseText);
    }
  }
}
// 优先使用绝对路径避免地址解析错误，相对路径仅在后台页面调用时可靠
xmlhttp.open("POST", "<?php echo admin_url( 'admin-ajax.php' ); ?>", true);
xmlhttp.send(formData);

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