PHP联系表单提交后跳转空白页问题求助：已尝试e.preventDefault()等方法仍未解决

嘿，我帮你排查下这个问题——核心原因其实是你的提交按钮点击事件根本没绑定成功，导致e.preventDefault()完全没生效，表单还是走了默认的提交流程，才跳转到了空白的mail.php页面。咱们一步步来修复：

1. 先搞定最致命的拼写错误 #

你HTML里的提交按钮多了个莫名其妙的n属性：

<input n id="btnClick" type="submit" class="btn btn-success" value="Send Message">

赶紧改成这样：

<input id="btnClick" type="submit" class="btn btn-success" value="Send Message">

这个小错误会让jQuery的$('#btnClick')找不到按钮元素，你的点击事件等于白写，自然没法阻止表单跳转。

2. 让JS能正确拿到表单值 #

你JS里用$('input#name')这类选择器，但HTML里的输入框只有name属性，没有对应的id，这会导致获取到的值都是undefined，Ajax请求等于无效数据。给每个表单控件加上id：

<div class="row">
  <div class="col-md-6 form-group">
    <input id="name" name="name" type="text" class="form-control" placeholder="Name" required>
  </div>
  <div class="col-md-6 form-group">
    <input id="email" name="email" type="email" class="form-control" placeholder="Email" required>
  </div>
  <div class="col-md-6 form-group">
    <input id="subject" name="subject" type="text" class="form-control" placeholder="Subject" required>
  </div>
  <div class="col-12 form-group">
    <textarea id="message" name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
  </div>
  <div class="col-12">
    <input id="btnClick" type="submit" class="btn btn-success" value="Send Message">
  </div>
</div>

嫌加id麻烦的话，也可以直接用name属性选择，比如$('input[name="name"]')，效果一样。

3. 优化Ajax请求，避免路径和数据错误 #

首先，你的mail.php放在assets/js文件夹里是不合理的，PHP文件不该和JS混放，建议移到网站根目录或者和当前页面同级的目录，然后调整Ajax的url路径。另外，别手动拼接formData字符串，用对象格式更安全：

$('#btnClick').on('click', function(e){
  e.preventDefault();
  // 用对象存储表单数据，jQuery自动处理编码
  var formData = {
    name: $('#name').val(),
    email: $('#email').val(),
    message: $('#message').val(),
    subject: $('#subject').val()
  };
  $.ajax({
    type: 'post',
    url: '../mail.php', // 这里根据mail.php的实际位置调整，比如同级就写'mail.php'
    data: formData,
    success: function(results) {
      $('ul#msgSubmit').html(results);
    },
    // 加个错误回调，方便调试
    error: function(xhr) {
      $('ul#msgSubmit').html('请求出错：' + xhr.responseText);
    }
  });
});

4. 修复PHP里的邮件头错误 #

你的PHP代码里有一行$headers .= $text . "\r\n";，但$text变量根本没定义，这会导致邮件头出错，甚至影响邮件发送，直接删掉这一行：

# email headers.
$headers = "From: $name <$email>";
$headers .= 'MIME-Version: 1.0' ."\r\n";
$headers .= 'Content-Type: text/plain; charset=utf-8' . "\r\n"; // 改成纯文本更符合你的内容格式
$headers .= 'Content-Transfer-Encoding: 8bit'. "\r\n";
// 删掉下面这行无效代码
// $headers .= $text . "\r\n";

5. 确认页面引入了jQuery #

如果你的页面没加载jQuery库，所有jQuery代码都不会生效，e.preventDefault()自然没用。在页面的</body>标签前加一行：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

（也可以下载本地版本引入）

按这些步骤修复后，点击提交按钮应该就能在当前页面显示提示，不会再跳转到空白页了。

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