我的JavaScript(XMLHttpRequest)邮件发送函数POST参数为空，求排查

嘿，我帮你找出了几个导致POST参数为空的核心问题，还有代码里的一些小瑕疵，咱们一步步来解决：

主要问题点 #

• 参数未做URL编码：你直接把表单值拼接到字符串里，如果用户输入的内容包含&、=或者空格、中文这类特殊字符，会直接破坏POST参数的结构，导致PHP端完全解析不到$_POST里的内容。
• 错误获取status元素的值：status是用来显示结果的div，它没有value属性，你这里误把它当成输入框去获取value，而且这个参数本来就不需要传给后端，完全是多余的。
• 重复发送请求：代码里先调用了hr.send(vars)，又用setTimeout再发一次，这不仅多余，还可能导致状态显示混乱。

修复后的原生JS代码 #

function sendemail() {
    // 获取表单输入值
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var subject = document.getElementById('subject').value;
    var msg = document.getElementById('message').value;
    // 缓存status元素，避免重复DOM查询
    var statusElement = document.getElementById('status');
    
    // 对每个参数值做URL编码，确保参数结构不被破坏
    var params = "name=" + encodeURIComponent(name) + 
                 "&email=" + encodeURIComponent(email) + 
                 "&subject=" + encodeURIComponent(subject) + 
                 "&msg=" + encodeURIComponent(msg);
    
    var xhr = new XMLHttpRequest();
    var url = "send-email.php";
    
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            var response = xhr.responseText;
            statusElement.innerHTML = response;
        }
    }
    
    // 先显示发送状态
    statusElement.innerHTML = "Sending...";
    // 只发送一次请求
    xhr.send(params);
}

更简洁的jQuery实现（既然你已经引入了jQuery） #

原生XHR写起来容易踩坑，用jQuery的$.post能帮你自动处理参数编码和请求细节，代码更简洁：

function sendemail() {
    var $status = $('#status');
    $status.text("Sending...");
    
    $.post("send-email.php", {
        name: $('#name').val(),
        email: $('#email').val(),
        subject: $('#subject').val(),
        msg: $('#message').val()
    }, function(response) {
        $status.html(response);
    });
}

后端验证建议 #

为了确认参数是否能正常接收，你可以先在send-email.php里加一行调试代码：

<?php
// 打印所有POST参数，看是否能接收到
var_dump($_POST);
?>

如果还是为空，检查一下PHP配置里的post_max_size和upload_max_filesize，确保没有超过请求大小限制。

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