javascript - 如何在 Ajax 发布成功之前保持 Html 元素隐藏

Question

我有一个使用 bootstrap 创建的表单。

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="${pageContext.request.contextPath}/Post" method="POST">
    <div class="form-group">
      <label for="Name">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="" >
    </div>
    <div class="form-group">
      <label for="Age">Age:</label>
      <input type="text" class="form-control" id="age" placeholder="" >
    </div>
    <div class="form-group">
      <label id="target" class="hidden" style="color:red;">Hi msg</label>    
    </div>
    <button type="submit" class="btn btn-default" id="press">Submit</button>
  </form>
</div>    

表单在后者中有标签，显示文本 ( Hi msg)。我想要它最初是隐藏的，然后在我的 POST 请求成功后变得可见，我的 ajax 调用看起来像这样。

$(document).ready(function(){
  $("#press").click(function(){
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/Post",
      success: function() {
        $("#target").removeClass("hidden");
      }
    }); 
  });
});

这基本上是在之后尝试从标签中删除 Hidden 类发布请求成功。我究竟做错了什么 ？问题是它只显示几秒钟，然后再次隐藏。

Answer 1

我认为您对 Bootstrap 类 hidden 的理解有误。尝试用 d-none 替换此类。

这是一个例子:

JSFIDDLE

编辑:要检查您的发帖请求是否成功，这里是一个示例:

$(document).ready(function(){
  $("#press").click(function(){
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/Post",
      success: function(data) {
        if (data === 'true') {
            $("#target").removeClass("d-none");
        }        
      }
    }); 
  });
});

在这种情况下，如果 URL“${pageContext.request.contextPath}/Post”返回字符串 true，类 d-none 将被删除。