如何阻止JavaScript POST时页面刷新？Flask联系表单问题

第一步：修正HTML结构 #

先把主表单和提示容器的结构补全、修正标签错误，给容器加上JS里用到的类名，同时默认隐藏提示容器：

<form id="contactForm">
  <div class="container">
    <h2>主表单</h2>
    <!-- 这里添加你的表单输入项，记得给必填项加required属性启用HTML5验证 -->
    <input type="text" name="name" required placeholder="姓名">
    <input type="email" name="email" required placeholder="邮箱">
    <select name="subject" required>
      <option value="">请选择主题</option>
      <option value="咨询">咨询</option>
      <option value="反馈">反馈</option>
    </select>
    <textarea name="message" required placeholder="留言内容"></textarea>
    <button type="submit">提交</button>
  </div>
</form>
<div class="back" style="display: none;">
  <h2>提交成功！</h2>
  <p>我们会尽快回复您</p>
</div>

第二步：调整JavaScript逻辑 #

绑定表单的submit事件来处理提交，既保留HTML5表单验证，又彻底阻止页面刷新：

// 等页面DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const contactForm = document.getElementById('contactForm');
  
  contactForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为（核心：防止页面刷新）
    e.preventDefault();
    
    // 检查表单验证状态，不通过则显示浏览器默认提示
    if (!contactForm.checkValidity()) {
      contactForm.reportValidity();
      return;
    }

    // 收集表单数据
    const formData = {
      name: $("input[name='name']").val(),
      email: $("input[name='email']").val(),
      subject: $("select[name='subject']").val(),
      message: $("textarea[name='message']").val(),
    };

    // 发送请求到Flask后端
    $.ajax({
      url: baseUrl,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(formData),
      success: function(response) {
        autoReply(formData.email, formData.subject, formData.message);
      },
      error: function(error) {
        alert('邮件发送失败:', error);
      },
    });
  });
});

function autoReply(email, subject, message) {
  const parms = {
    email: email,
    subject: subject,
    message: message 
  };
  const service_id = '你的service_id';
  const template_id = '你的template_id';
  const public_key = '你的public_key';
  
  emailjs.send(service_id, template_id, parms, public_key).then(function(response) {
    // 切换容器显示状态
    document.querySelector(".container").style.display = "none";
    document.querySelector(".back").style.display = "flex";
  }, function(error) {
    console.error('自动回复发送失败:', error);
  });
}

核心要点 #

• 用表单的submit事件替代按钮的onclick，既能保留HTML5自带的验证规则（必填、格式检查等），又能通过e.preventDefault()彻底阻止页面刷新。
• 默认隐藏提示容器，确保只有提交成功后才显示。
• 手动调用checkValidity()和reportValidity()，保证验证不通过时弹出浏览器原生错误提示。

内容的提问来源于stack exchange，提问作者Dean Marko