如何只在收到服务器的回复消息后显示DIV

How to show DIV only after receiving reply message from server?

本文关键字:消息 回复 显示 DIV 服务器      更新时间:2024-03-17

我只想在从服务器获得响应后显示特定的div。

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

这是我的两个潜水器:

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

我的问题是,每当页面加载或重新加载时,msgDIV总是在屏幕上可见。我希望只有当它从我的服务器得到响应时,它才可见。有没有JQUERY或JAVASCRIPT或简单的CSS方法可以做到这一点?

当页面加载时,您需要隐藏div。向#msg添加一个额外的样式可以实现

#msg
{
    display: none;
}

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

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

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

使用jquery函数可以

$(document).ready(function(){
    $("#msg").hide();
    // later after ajax?
    $.ajax(url).success (function(data) {
      $("#msg").show();
      return false;
    });
});
<form method='post' action='#'>
    <input type='text' name='email' placeholder="person@example.com">
    <input type='submit' name="send" value='submit'>
</form>
<?php 
//connect you database here
//after user submits the email check if the email exits
$sql = 'select * from yourtable where email='.$_POST['email'];
$res = mysql_query($sql);
if(mysql_count_rows($res)==1){
  ?>
  <script>
        var unhide_div = document.getElementById('mydiv');
        unhide_div.style.visibility = 'visible';
  </script>
  <?php 
  }else{
      die('Email verification failed!!!');
      }
?>

如果检查了电子邮件,您的邮件将显示在此处!!