javascript - 如何在收到服务器回复消息后才显示DIV？

Question

我只想在收到服务器响应后才显示特定的 DIV。

我想做的是，为我的用户提供密码恢复功能。我得到了他们注册的电子邮件 ID，然后我用我的数据库检查了它。如果它存在于我的数据库中，我会在一个 div 中发回一条消息，说明密码已发送到您的邮件 ID。如果它是一个未注册的电子邮件 ID，我会发送一条不同的消息，说明电子邮件 ID 未注册。

这是我的两个 div:

DIV 获取我的用户的电子邮件 ID

<div  id="fgpass" >
                  
                    <div id="newpass">
                        <div style="position: absolute;top: 10%;left: 10%;">
                            <center><h2>PASSWORD RECOVERY</h2></center>
                            <h4> Enter Your Registered</h4> 
                        
                      
                  <h4>E-Mail Address :</h4>
                        
                    <f:view>
                        <h:form>
                         <center>
                             <h:inputText id="cmailid" required="true" value="#{forgotPass.mailid}"/>
                             <h:commandButton value="Submit"   action="#{forgotPass.fpass}">

                            </h:commandButton>
                            
                           
                    
                         </center>
                   
                   </div>
                    </div>
                             
                            </h:form>
                </div>
                          
            </div>

显示服务器响应消息的DIV

  <div id="msg" onclick="$('#msg').hide();">
            <div style="position: absolute;top: 20%;left: 2%;">
                   <span style="font-size: medium;">
                         <h:outputLabel  value="#{forgotPass.finalresult}"/>
                   </span>
            </div>
    </div>  

我的 CSS

#fgpass {
    position: absolute;
    left: 65%;
    top: 4%;
    
    border-color: #009900;
    border-width: 3px;
    border-radius: inherit;
   z-index: 800;
   
}
#newpass{
   position: absolute;
   z-index: 1000;
   height:160px;
   width: 250px;
  color: midnightblue;
  
   visibility: hidden;
   background-color: lavender;
   -moz-border-radius: 8px;
   border-radius: 8px;
   border-width: 3px;
   border-color:#444;
}  
#msg {
    z-index: 5000;
   width:160px;
   height: 150px;
    -moz-border-radius: 8px;
   border-radius: 8px;
   border-width: 3px;
   border-color:#444;
    position: absolute;
    left: 85%;
    top:3%;
    cursor: pointer;
   background-color: navajowhite;
    
}

我的问题是，每当页面加载或重新加载时，msg DIV 始终在屏幕上可见。我希望它仅在从我的服务器获得响应时才可见。是否有任何 JQUERY 或 JAVASCRIPT 或简单的 CSS 方法可以做到这一点？

Answer 1

当页面加载时，您需要隐藏 div。添加一个额外的样式到 #msg 就可以了

#msg
{
    display: none;
}

如果您使用 AAJAX 从服务器获取响应，那么您可以使用以下代码

$("#msg").show();

在 ajax 请求的成功回调 函数中。 jQuery AJAX