不使用jQuery，Ajax POST提交订阅表单的问题排查

你的订阅表单代码存在几个关键问题，导致点击按钮后返回null而非预期的错误提示，我来一步步帮你解决：

1. 请求方法不匹配（核心问题） #

你的PHP代码明确只处理POST请求（通过$_SERVER["REQUEST_METHOD"] == "POST"判断），但你的JavaScript里却用GET方法发起请求：

xmlhttp.open("GET", "subs.php", true);

这会直接跳过PHP里的所有处理逻辑，服务器不会返回任何JSON数据，前端解析自然得到null。

修复： 将请求方法改为POST：

xmlhttp.open("POST", "subs.php", true);

2. 缺少POST请求的Content-Type头 #

发送表单格式的POST数据时，必须告诉服务器数据的编码格式，否则PHP无法正确解析$_POST变量。

修复： 在open()之后、send()之前添加请求头：

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3. 错误使用innerHTML更新输入框 #

你用innerHTML来修改input元素的内容，但input的值是通过value属性控制的，innerHTML仅用于设置元素内部的HTML内容（比如div、span的文本），对input完全无效。

修复： 将输入框的innerHTML改为value，错误提示的span保持innerHTML即可：

document.getElementById("email").value = myObj.email;
document.getElementById("emailErr").innerHTML = myObj.emailErr;
document.getElementById("name").value = myObj.name;
document.getElementById("nameErr").innerHTML = myObj.nameErr;

4. 未声明变量导致全局污染 #

代码里myObj = JSON.parse(this.responseText);没有用var/let声明，会变成全局变量，容易引发意外问题。

修复： 加上let声明变量：

let myObj = JSON.parse(this.responseText);

5. 表单数据编码（重要细节） #

如果用户输入包含空格、@、&等特殊字符，直接拼接的字符串会导致数据传输错误，需要用encodeURIComponent()编码每个字段值。

修复： 优化数据拼接代码：

var data = "email=" + encodeURIComponent(document.getElementById("email").value) + "&name=" + encodeURIComponent(document.getElementById("name").value);

6. HTML标签拼写错误（非功能性但建议修正） #

你把<span>写成了<spam>，虽然不影响功能，但规范起见建议修正：

<!-- 错误写法 -->
<spam class="error" style="color:red"><i id="nameErr"></i></spam>
<!-- 正确写法 -->
<span class="error" style="color:red"><i id="nameErr"></i></span>

修复后的完整JavaScript代码 #

function verify(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let myObj = JSON.parse(this.responseText);
            document.getElementById("email").value = myObj.email;
            document.getElementById("emailErr").innerHTML = myObj.emailErr;
            document.getElementById("name").value = myObj.name;
            document.getElementById("nameErr").innerHTML = myObj.nameErr;
        }
    };
    xmlhttp.open("POST", "subs.php", true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = "email=" + encodeURIComponent(document.getElementById("email").value) + "&name=" + encodeURIComponent(document.getElementById("name").value);
    xmlhttp.send(data);
}

为什么原生HTML表单能正常工作？ #

因为原生表单发送POST请求时，会自动设置正确的Content-Type头，并且自动编码特殊字符，而你的Ajax代码缺少了这些关键步骤，导致PHP无法解析数据。

现在把这些修复点全部调整后，你的订阅表单应该就能正常返回错误提示或处理数据了。

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