纯JavaScript实现FormData提交无响应，JQuery版本正常，求排查帮助

我正在测试纯JavaScript中的FormData功能。jQuery版本的代码运行正常，但纯JavaScript代码没有任何结果。我已仔细检查，似乎遗漏了某些代码，恳请帮助。

我的代码 #

HTML #

<form id="myForm" enctype="multipart/form-data">                
    <div> <label for="fname"> First Name</label>
         <input type="text" id="fname" name="fname" placeholder="Enter your First Name" required> </div>
    <div> <label for="lname">Last Name</label>
         <input type="text" id="lname" name="lname" placeholder="Enter your Last Name" required> </div>
    <div> 
         <label for="email">Email </label>
         <input type="email" id="email" name="email" placeholder="Enter your email" required>
    </div>
    <button type="button" class="buttons" onclick="submitFormAjax()">Submit</button>
</form>
<div id="response_message"></div>
<script src="stack.js"></script>

JavaScript #

function submitFormAjax() {
    var xmlhttp;
    //Checking for Old window versions
    if(window.XMLHttpRequest){
       xmlhttp = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    xmlhttp.open("POST", "custstack.php", true);
    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200)
        {
            document.getElementById("response_message").innerHTML = this.responseText;
        }
    }
    // Retrieving the form data
    var myForm = document.getElementById("myForm");
    var formData = new FormData(myForm);
    // Sending the request to the server
    xmlhttp.send(formData);
}

PHP #

<?PHP
    $fname = clean( $_POST[ "name" ] );   echo " <br /> Name = " . $fname . "<br />";
    $lname = clean( $_POST[ "name" ] );   echo " <br /> Last Name = " . $lname . "<br />";
    $tel = clean( $_POST[ "tel" ] ); echo " <br /> Phone = " . $tel . "<br />";
    $email = clean( $_POST[ "email" ] ); echo " <br /> Email = " . $email . "<br />";
    $password = clean( $_POST[ "password" ] ); echo " <br /> Password = " . $password . "<br />";
    function clean( $userinput ) {
        $inp = trim( $userinput );
        $inp = stripslashes( $userinput );
        $inp = htmlspecialchars( $userinput );
        return $inp;
    }
?>

问题分析与解决方案 #

你的代码存在两个核心问题导致无结果：

1. PHP参数名完全不匹配
   HTML表单的字段名是fname、lname、email，但PHP代码里错误使用$_POST["name"]（重复调用两次）、$_POST["tel"]、$_POST["password"]——这些参数在表单中根本不存在，所以输出为空。

2. clean函数逻辑错误
   clean函数中，你将trim后的结果赋值给$inp，但后续的stripslashes和htmlspecialchars却直接操作原$userinput，导致trim的效果被忽略，应该始终使用$inp进行链式处理。

修正后的代码 #

修正后的PHP

<?PHP
    // 匹配HTML表单的实际字段名，用?? ''避免字段不存在时触发PHP警告
    $fname = clean( $_POST["fname"] ?? '' );   
    echo " <br /> Name = " . $fname . "<br />";
    
    $lname = clean( $_POST["lname"] ?? '' );   
    echo " <br /> Last Name = " . $lname . "<br />";
    
    // 移除表单中不存在的tel、password相关代码
    $email = clean( $_POST["email"] ?? '' ); 
    echo " <br /> Email = " . $email . "<br />";

    function clean( $userinput ) {
        $inp = trim( $userinput );
        $inp = stripslashes( $inp ); // 使用处理后的$inp继续操作
        $inp = htmlspecialchars( $inp );
        return $inp;
    }
?>

优化后的JavaScript（可选，更符合现代规范）

主流浏览器已全面支持XMLHttpRequest，可移除ActiveX兼容代码；同时推荐用事件监听替代内联onclick，并添加错误处理：

// DOM加载完成后绑定提交事件，替代内联onclick
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.buttons').addEventListener('click', submitFormAjax);
});

function submitFormAjax() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "custstack.php", true);
    
    // 使用onload替代onreadystatechange，逻辑更简洁
    xmlhttp.onload = function() {
        if (this.status === 200) {
            document.getElementById("response_message").innerHTML = this.responseText;
        } else {
            document.getElementById("response_message").innerHTML = "请求失败，状态码：" + this.status;
        }
    }
    
    // 处理网络错误
    xmlhttp.onerror = function() {
        document.getElementById("response_message").innerHTML = "网络连接错误";
    }
    
    const myForm = document.getElementById("myForm");
    const formData = new FormData(myForm);
    xmlhttp.send(formData);
}

额外推荐：使用Fetch API替代XMLHttpRequest #

现代开发更推荐使用更简洁的fetch API：

function submitFormAjax() {
    const myForm = document.getElementById("myForm");
    const formData = new FormData(myForm);
    
    fetch("custstack.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("response_message").innerHTML = data;
    })
    .catch(error => {
        document.getElementById("response_message").innerHTML = "请求出错：" + error.message;
    });
}

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