使用JavaScript/jQuery向PHP脚本传递表单值遇到问题求助

核心故障点 #

• 传值格式与PHP解析规则不兼容：当前直接发送拼接的逗号分隔字符串，未指定请求内容类型。PHP默认仅会自动解析application/x-www-form-urlencoded格式的POST数据（也就是原生表单提交的标准格式），对于这种直接发送的纯文本流，PHP不会自动将其拆分写入$_POST超全局数组，导致后端拿不到用户名、密码字段的值。你之前PHP逻辑运行正常，大概率是此前走的是原生表单提交场景，和当前AJAX的传值格式不匹配。
• 事件对象未传入回调：在click事件回调中直接调用event.preventDefault()，但没有将event作为回调函数的入参传入，在部分浏览器或JS严格模式下会直接抛出event is not defined的错误，中断后续所有AJAX执行逻辑。
• 数据拼接结构不匹配：采用username,password,的逗号分隔拼接结构，即便后端读到了请求内容，也无法直接映射到现有PHP的字段取值逻辑中。
• 冗余标签写法：<input>是自闭合元素，后续写</input>属于无效的闭合标签，不影响实际取值但不符合HTML规范，可以直接删除。

无后端改动的修正实现 #

如果不想调整现有PHP的存储逻辑，只需要修改JS端的传值格式、补全必要的请求头即可，改动要点：

1. 将传递的数据改为PHP可识别的key=value&key2=value2格式，替换原有的逗号拼接逻辑
2. 发送请求前补充表单格式对应的Content-Type请求头，让PHP可以自动解析请求内容
3. 将event对象作为参数传入click回调，避免事件对象未定义的报错
4. 对传递的字段做URL编码，避免用户名、密码里有特殊字符（比如&、=）打乱传值格式

修正后的JS参考代码：

$(document).ready(function() {
    // 给回调函数传入event参数
    $('#submit').click(function(event) {
        event.preventDefault();

        var request = new XMLHttpRequest();
        request.open('POST', 'create_file.php');
        // 必须设置该请求头，PHP才能自动解析POST数据
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        var username = document.getElementById("username").value.trim();
        var password = document.getElementById("password").value;
        // 按urlencoded格式拼接，对特殊字符做编码
        var data = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;

        request.onload = function() {
            // 补充简单状态判断，方便排查请求问题
            if (request.status === 200) {
                console.log('数据提交成功，后端返回：', request.responseText);
            } else {
                console.error('请求异常，状态码：', request.status);
            }
        }
        request.send(data);
    });
});

补充说明：如果坚持要传递逗号分隔的纯文本格式，PHP端无法通过$_POST取值，需要通过file_get_contents('php://input')读取原始请求体内容后自行拆分解析，这种方式和现有PHP逻辑不兼容，不推荐使用。

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