如何让HTML元素在Ajax POST请求成功前保持隐藏？（含Bootstrap表单示例）

嘿，这个需求其实挺常见的，结合Bootstrap的工具类和简单的Ajax逻辑就能轻松实现，我给你一步步说明：

步骤1：给目标元素添加默认隐藏类 #

首先，给你想要隐藏的元素加上Bootstrap自带的 d-none 类——这个类会直接设置元素的 display: none，让它默认处于隐藏状态。比如假设你要隐藏一个提交成功后的提示框，代码可以这么写：

<div id="successAlert" class="alert alert-success mt-3 d-none">
  表单提交成功！
</div>

步骤2：修改表单提交逻辑，改用Ajax发送请求 #

接下来，你需要阻止表单的默认提交行为（避免页面刷新），然后通过Ajax异步发送POST请求，并在请求成功后显示目标元素。这里用jQuery来写会更简洁（Bootstrap项目通常都会引入jQuery），结合你的现有表单代码，完整示例如下：

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form id="myForm" action="${pageContext.request.contextPath}/Post" method="POST">
    <div class="form-group">
      <label for="Name">Name:</label>
      <!-- 注意加上name属性，后端才能接收数据 -->
      <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label for="Age">Age:</label>
      <input type="text" class="form-control" id="age" name="age" placeholder="Enter your age">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  
  <!-- 要隐藏的成功提示框 -->
  <div id="successAlert" class="alert alert-success mt-3 d-none">
    表单提交成功！
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 获取表单数据
    var formData = $(this).serialize();
    
    // 发送Ajax POST请求
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: formData,
      success: function(response) {
        // 请求成功后，移除d-none类，显示提示框
        $('#successAlert').removeClass('d-none');
        // 可选：如果需要，可以清空表单
        $('#myForm')[0].reset();
      },
      error: function(xhr, status, error) {
        // 可选：处理请求失败的情况，比如显示错误提示
        alert('提交失败，请稍后重试');
      }
    });
  });
});
</script>

关键细节说明 #

• d-none 是Bootstrap的实用工具类，比自己写CSS更符合Bootstrap的设计规范，也更方便。
• 一定要阻止表单的默认提交行为（e.preventDefault()），否则页面会刷新，Ajax的异步处理就失去意义了。
• 表单里的input元素要加上 name 属性，不然后端无法接收到提交的数据（你的原代码里漏掉了，我已经补上了）。
• 如果需要隐藏的是其他元素（比如某个按钮、加载动画），只需要给目标元素加上 d-none，然后在Ajax的success回调里移除这个类即可。

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