为何登录提交按钮的login键未被设置到PHP超全局变量$_POST中？

嘿，这个问题其实挺常见的，我来帮你捋清楚根源：

首先，你用event.preventDefault()阻止了表单的默认提交行为，转而手动通过FormData对象收集数据发送给后端。这里的核心问题是：手动创建的FormData只会自动收集表单里的输入类控件（比如文本框、密码框这类），但不会主动带上submit按钮的name和value——只有当浏览器触发默认表单提交（也就是你不阻止默认行为时），才会把用户点击的那个submit按钮的信息一并发送到后端。

另外，你的前端代码还有个小疏漏：form标签没有设置id="loginForm"，但脚本里用了document.getElementById('loginForm')绑定事件，这会导致事件监听根本绑定失败（控制台应该能看到报错），建议给form加上id，或者换成document.querySelector('form')来获取表单元素。

接下来给你两个实用的解决方案，任选其一即可：

方案一：手动给FormData追加submit按钮信息 #

在创建FormData之后，手动把submit按钮的name和value添加进去：

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    console.log("catching event")
    const formData = new FormData(this);
    // 手动追加submit按钮的信息
    formData.append('login', 'login');
    fetch('login.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        console.log('Server Response:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

方案二：监听submit按钮的点击事件（适合多按钮场景） #

如果你的表单以后可能有多个submit按钮（比如“登录”“注册”），可以直接监听按钮的点击事件，这样能精准获取用户点击的那个按钮的信息：

document.querySelector('input[type="submit"]').addEventListener('click', function(event) {
    event.preventDefault();
    const form = this.form; // 获取按钮所属的表单
    const formData = new FormData(form);
    // 添加当前点击的submit按钮的name和value
    formData.append(this.name, this.value);
    
    fetch('login.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        console.log('Server Response:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

这样修改之后，后端的$_POST['login']就能正常获取到对应的值了，你可以试试看~

备注：内容来源于stack exchange，提问作者novice