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");
      }
    }); 
  });
});

这基本上是试图从标签中删除隐藏类邮寄申请成功。我究竟做错了什么？问题是它变得可见只有几秒钟，直到它再次变为隐藏。

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＆＃34; $ {pageContext.request.contextPath} / Post ＆＃34;返回字符串 true ，类d-none将被删除。

Answer 2

您可以尝试调用show（）方法。通常，“hidden”类仅在css中设置display属性。

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

Answer 3

I Actually Figured out the answer. the problem was the <button> tag which keeps on calling other Styles related to the button causing a reload effect at the Post Request. i changed the <button> tag to a <div>.

Basically From this;
<button type="submit" class="btn btn-default" id="press"> Submit </button>

To this;
<div type="submit" class="btn btn-default" id="press"> Submit </div>

then my original code worked fine.

如何保持Html元素隐藏，直到Ajax发布成功

3 个答案: