WordPress站点中JS AJAX POST请求无法获取返回值问题

嘿，我来帮你排查下这个AJAX调用的问题～从你贴的代码来看，有几个小细节可能导致你拿不到返回值，咱们一步步来解决：

1. 复用XMLHttpRequest对象的隐患 #

你在window.onload外只创建了一个xhr对象，然后在每个按钮的点击事件里重复使用它。如果用户快速点击多个按钮，前一个请求还没完成就被新请求覆盖，很容易导致响应混乱或者直接拿不到正确结果。

修复思路：把xhr对象的创建移到按钮点击事件内部，每次点击都新建一个独立的请求。

2. 缺失错误处理逻辑 #

你的代码只监听了onload事件，但如果请求遇到网络错误、路径错误或者服务器报错，你完全看不到错误信息，根本不知道问题出在哪。

修复思路：加上onerror事件监听，同时在onload里判断请求状态码是否正常。

修改后的前端JS代码 #

window.onload = function(){ 
    var boton = document.getElementsByClassName("teatro-buy");

    for (let qq = 0; qq < boton.length; qq++) {
        boton[qq].onclick = function() { 
            const botonid = this.id;
            console.log("当前点击的按钮ID：", botonid);
            
            // 每次点击新建一个AJAX请求对象
            const xhr = new XMLHttpRequest();
            
            xhr.onload = function () {
                // 先判断请求是否成功（状态码200-299）
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log("后端返回值：", this.responseText);
                } else {
                    console.error("请求出错，状态码：", xhr.status);
                }
            };
            
            // 监听网络错误
            xhr.onerror = function() {
                console.error("请求发生网络错误，请检查路径或服务器状态");
            };
            
            xhr.open("POST", "ajaxcallnew.php");
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("lol=" + botonid);
        }
    }
};

优化后的后端PHP代码 #

<?php
// 设置正确的响应内容类型，避免乱码
header('Content-Type: text/plain; charset=utf-8');

if(isset($_POST['lol'])){
    // 输出接收到的参数值
    echo $_POST['lol'];
    exit; // 终止脚本执行，避免输出多余内容
} else {
    // 如果没有接收到参数，返回400错误和提示
    http_response_code(400);
    echo "错误：缺少必要参数";
}
?>

额外排查建议 #

• 检查文件路径：确认ajaxcallnew.php的路径是否正确。如果你的JS是在WordPress主题模板里，建议用PHP输出绝对路径，比如：

  // 在WP模板里输出正确的PHP文件路径
  xhr.open("POST", "<?php echo get_template_directory_uri(); ?>/ajaxcallnew.php");
  

• 查看浏览器Network面板：点击按钮后，打开浏览器开发者工具的Network标签，找到对应的POST请求，检查：
  • 请求的URL是否正确
  • Form Data里是否包含lol参数和对应的按钮ID
  • 响应状态码和响应内容是什么
• WordPress规范建议：如果是在WordPress中使用AJAX，更推荐用WP自带的AJAX机制（通过wp_ajax_和wp_ajax_nopriv_钩子），这样可以利用WP的权限验证和环境，避免单独的PHP文件出现权限或环境问题。

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