如何结合Bootstrap使用HTML GET请求获取用户输入值并实现跳转？

需求回顾 #

• 让访问者填写个人信息，收集后用于内部分析存储
• 表单提交完成后，页面自动重定向到search地址
• 用Bootstrap框架搭建页面样式

补全并优化后的完整代码 #

{% block content %}
<div class="container mt-4">
  <div class="page-header">
    <h2 style="color:blue;">Welcome to my website</h2>
  </div>

  <!-- 用户信息收集表单 -->
  <form id="customerForm" class="mt-4">
    <div class="mb-3">
      <label for="name" class="form-label">姓名</label>
      <input type="text" class="form-control" id="name" name="name" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">邮箱</label>
      <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <!-- 可根据需求添加更多字段：年龄、职业、联系方式等 -->
    <button type="button" class="btn btn-primary" onclick="formSubmit()">提交信息</button>
  </form>
</div>

<script>
function formSubmit() {
  const form = document.getElementById('customerForm');
  const formData = new FormData(form);

  // 先把表单数据发送到后端存储（你需要替换成实际的后端接口地址）
  fetch('/save-user-data', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      // 数据存储成功后，跳转至search地址
      window.location.href = '/search';
    } else {
      alert('信息提交失败，请重试');
    }
  })
  .catch(error => {
    console.error('提交出错:', error);
    alert('提交过程中出现错误，请稍后再试');
  });
}
</script>
{% endblock %}

关键细节说明 #

• Bootstrap样式适配：用container、mt-4、mb-3这些Bootstrap内置类快速实现响应式布局和合理间距，不用自己写复杂的CSS
• 基础表单验证：给必填字段加上required属性，确保用户不会遗漏核心信息
• 数据安全逻辑：先通过fetch把数据发送到后端接口存储，确认成功后再执行重定向，避免出现用户提交了信息但数据没存上的情况
• 容错提示：如果提交失败，会弹出提示告知用户，提升页面友好度

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