技术问询：提交表单时如何跳转页面？用jQuery实现div内表单提交后跳转至感谢页或div

我来帮你解决这两个表单相关的问题，都是前端开发里很常见的场景：

这里分两种常见实现方式，看你的需求选择：

方式1：纯HTML原生实现（最简单） #

如果你的表单提交后要跳转的页面就是处理表单数据的后端页面，直接给<form>标签设置action属性即可。点击提交按钮后，浏览器会自动把表单数据发送到action指定的地址，同时页面跳转过去：

<form action="/your-thank-you-page" method="POST">
  <!-- 表单输入项，比如姓名、邮箱等 -->
  <input type="text" name="username" required>
  <button type="submit">提交表单</button>
</form>

如果后端处理完数据后需要跳转到另一个页面，也可以让后端返回302重定向响应，前端不需要额外操作。

方式2：JavaScript/AJAX提交后手动跳转 #

如果需要在提交前做一些自定义逻辑（比如表单验证、加载动画），或者不想让页面刷新提交，可以用JS阻止默认提交行为，完成AJAX提交后再跳转：

// 获取表单元素
const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  // 阻止浏览器默认的表单提交刷新行为
  e.preventDefault();

  // 这里可以加表单验证逻辑，比如检查输入是否为空
  const usernameInput = this.querySelector('input[name="username"]');
  if (!usernameInput.value.trim()) {
    alert('请填写用户名');
    return;
  }

  // 用Fetch API提交表单数据
  fetch(this.action, {
    method: this.method,
    body: new FormData(this)
  })
  .then(response => {
    if (response.ok) {
      // 提交成功，跳转到指定页面
      window.location.href = '/your-thank-you-page';
    } else {
      alert('提交失败，请稍后重试');
    }
  })
  .catch(error => {
    console.error('提交出错:', error);
    alert('网络出错，请检查连接');
  });
});

假设你的HTML结构大概是这样的：

<div class="form-wrapper">
  <form id="user-form" action="/submit-form" method="POST">
    <input type="email" name="email" placeholder="输入邮箱" required>
    <button type="submit">提交</button>
  </form>
</div>

<!-- 用于显示感谢消息的隐藏div -->
<div id="thank-you-box" style="display: none; margin-top: 20px; padding: 15px; background: #f0f8ff;">
  🎉 感谢您的提交！我们会在24小时内回复您。
</div>

场景1：提交后跳转至感谢页面 #

用jQuery监听表单的submit事件，阻止默认提交，通过AJAX发送数据，成功后跳转：

$(document).ready(function() {
  // 监听div内部表单的提交事件
  $('.form-wrapper #user-form').on('submit', function(e) {
    e.preventDefault();
    const $form = $(this);

    // AJAX提交表单
    $.ajax({
      url: $form.attr('action'),
      method: $form.attr('method'),
      data: $form.serialize(), // 序列化表单数据
      success: function() {
        // 提交成功，跳转感谢页
        window.location.href = '/thank-you-page';
      },
      error: function() {
        alert('提交失败，请检查网络后重试');
      }
    });
  });
});

场景2：提交后显示指定div（不跳转页面） #

如果想在当前页面展示感谢消息，而不是跳转，只需要在AJAX成功后切换元素的显示状态即可：

$(document).ready(function() {
  $('.form-wrapper #user-form').on('submit', function(e) {
    e.preventDefault();
    const $form = $(this);

    $.ajax({
      url: $form.attr('action'),
      method: $form.attr('method'),
      data: $form.serialize(),
      success: function() {
        // 隐藏表单所在的div，显示感谢消息div
        $('.form-wrapper').hide();
        $('#thank-you-box').show();
      },
      error: function() {
        alert('提交出错，请稍后再试');
      }
    });
  });
});

一些额外提示 #

• 不管用哪种方式，表单验证都很重要：提交前检查必填项、格式是否正确（比如邮箱格式），能减少无效提交，提升用户体验。
• 如果不需要自定义逻辑，纯HTML方式是最优解，性能更好也更简单。
• 处理错误情况时，尽量给用户清晰的反馈，不要让用户摸不着头脑。

内容的提问来源于stack exchange，提问作者Gavin Currie