使用AJAX/JavaScript实现联系表单无刷新提交后收到空邮件的问题修复咨询

你的问题核心出在AJAX请求的内容格式不匹配，再加上一些事件监听和逻辑的小疏漏，我帮你一步步修正：

1. 修复AJAX的内容类型冲突 #

你手动设置了Content-type: application/x-www-form-urlencoded，但发送的是FormData对象——这两种格式不兼容，导致PHP无法正确解析POST数据，所以收到的都是空值。

有两种解决方案：

方案一：移除手动设置的Content-Type头 #

当发送FormData时，浏览器会自动添加正确的multipart/form-data请求头，不需要手动指定：

// 删掉这一行代码
// xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");

方案二：将FormData转换为urlencoded格式 #

如果你坚持要用application/x-www-form-urlencoded格式，可以用URLSearchParams转换：

let data = new URLSearchParams(new FormData(formData));

2. 优化事件监听的精准度 #

你现在监听的是整个document的submit事件，容易误触发页面上的其他表单。建议直接绑定到你的联系表单上：

3. 修正错误处理逻辑 #

原来的代码在请求还未完成（readyState≠4）时就会显示错误信息，这不符合逻辑——应该只有在请求完成后，再根据状态码判断结果。

修正后的完整AJAX代码 #

document.addEventListener('DOMContentLoaded', function() {
  const contactForm = document.getElementById('contact-form');
  contactForm.addEventListener("submit", function(e) {
    e.preventDefault();
    let data = new FormData(this); // 用this指代当前表单，写法更简洁
    const xhr = new XMLHttpRequest();
    
    xhr.open('POST', "contactform.php", true);
    // 移除手动设置的Content-Type，让浏览器自动处理
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) { // 仅当请求完成时再判断状态
        if (xhr.status == 200) {
          contactForm.reset();
          document.querySelector('.response').innerHTML = '<p class="alert alert-success">Bedankt voor uw bericht. Wij nemen zo snel mogelijk contact met u op.</p>';
        } else {
          document.querySelector('.response').innerHTML = '<p class="alert alert-danger">Er is iets misgegaan.</p>';
        }
      }
    };
    xhr.send(data);
  });
});

额外：PHP代码的小问题 #

你的PHP里$from变量没有定义，会导致邮件头出错，建议补充定义：

// 在设置$header之前添加
$from = $email; // 使用用户填写的邮箱作为发件人
$header = "From:" . $from . "\r\n";

这样修改后，PHP就能正确接收AJAX发送的表单数据，你就能收到完整内容的邮件了。

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