JQuery 一段时间后无法隐藏消息

Question

我在 nodejs 服务器上使用 ajax 到 post 数据我从 nodejs 得到响应，我能够在前端显示它们，但问题是它们仍然存在，即使表单提交。我想在 sometime.I 尝试但无法达到预期结果后隐藏这些消息。

下面是我的代码：

register.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/register.js"></script>

<title><%= title %></title>

<style>
  
    h1 {
     text-align: center;
     margin-top:50px; 
     }
     
     .form{
       margin-top:50px;
       margin-left:30%;
       margin-right:30%;
     }

     input{
       margin-top:10px;
     }
     
     button{
        margin-top:20px;
     }

      #result{  
         text-align: center;
      }
     .alert{
        margin-top:15px;
        text-align: center;
        display:none;
     }

</style>

</head>
<body class="container">

<h1><%= title %></h1>

<div class="form">

    <form>

    <input id="name" name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
    <input id="mail" name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
    <button type="submit" class="btn btn-primary">SUBMIT</button> 

    <div class="alert alert-danger" role="alert">
    </div>
    
    </form>

 </div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

 
</body>

register.js

    $(document).ready(function(){

        $('.btn').click(function(e){
            e.preventDefault();
            ajaxPost();    //Function to post data
        });
     });

     function ajaxPost(){

        var formData = {

            name: $("#name").val(),
            email: $("#mail").val()
        } 

        $.ajax({

            type : "POST",
            contentType : "application/json",
            url : "http://localhost:3000/register",
            data : JSON.stringify(formData),
            dataType : 'json',
            success:function(data){
                 $(".alert").html(data.msg).show();
              }
       });
   }

有人告诉我我做错了什么。

Answer 1

在setTimeout中调用$(".alert").hide()，但不要忘记在.alert

中显示新消息时清除超时

let messageTo;
function showMessage(mess) {
  if (messageTo) {
    clearTimeout(messageTo);
    messageTo = undefined;
  }
  $(".alert").html(mess).show();
  messageTo = setTimeout(() => $(".alert").hide(), 5000);
}

Answer 2

我不明白你说的要隐藏什么信息。假设您想隐藏警报 div，您可以延迟使用 setTimeOut。

您的代码将是：

$.ajax({

            type : "POST",
            contentType : "application/json",
            url : "http://localhost:3000/register",
            data : JSON.stringify(formData),
            dataType : 'json',
            success:function(data){
                 $(".alert").html(data.msg).show();
                 
                 // Hide after 1 second
                 setTimeout(function(){ $(".alert").hide(); }, 1000);
              }
       });

JQuery 一段时间后无法隐藏消息

Unable to hide message after sometime in JQuery

javascript

jquery

ejs