一秒钟后我的 Ajax 输出消失了答案

【问题标题】：My Ajax output is disappearing after one sec一秒钟后我的 Ajax 输出消失了
【发布时间】：2021-10-16 10:04:54
【问题描述】：

我在 Ajax 中使用带有表单的 Ajax 我使用了 if 条件进行验证尽管一切正常，除了一件事是我的输出只显示一秒钟然后自动消失，任何人都可以在这方面帮助我：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script src="jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
  <h1>PHP & Ajax Seralize Form</h1>
  <form id="form-data" method="post">
      Name<br><input type="text" name="name" id="name" value=""><br><br>
      Age<br><input type="number" name="number" id="age" value=""><br><br>
      Gender<br>
        <input type="radio" name="gender" value="Male">Male
        <input type="radio" name="gender" value="Female">Fe-male<br><br>

      <select name="country">
        <option value="Kashmir">Kashmir</option>
        <option value="Egypt">Egypt</option>
        <option value="Norway">Norway</option>
        <option value="Iceland">Iceland</option>
      </select><br>
      <br><input type="submit" id="submit" value="Save">
  </form>

<div id="response">

</div>

<script>
  $(document).ready(function(){
    $('#submit').click(function(){
        var name = $('#name').val();
        var age = $('#age').val();

        if( name== "" || age== ""){
          $('#response').fadeIn();
          $('#response').removeClass('success-msg').addClass('error-msg').html("All fields are required");
        }else{
          $.ajax({
          url: 'save-form.php',
          type: 'POST',
          data: $('#form-data').serialize(),
          success: function(result){
            $('#response').fadeIn();
            $('#response').removeClass('error-msg').addClass('success-msg').html(result);
          }
        });
    }
  });
});
</script>

</body>
</html>

【问题讨论】：

标签： php ajax forms ajaxform

【解决方案1】：

你有一个类型为"submit"的按钮。

<input type="submit" id="submit" value="Save">

当此按钮上发生点击事件时，您的表单将被发送到服务器。您的表单上没有定义 action 属性，因此它在提交到相同的 URL 后重定向。

正如Sterko 所说，您可以使用事件处理程序来防止由于提交按钮而提交您的表单。

【讨论】：

【解决方案2】：

可能你的页面被刷新了，尝试使用preventDefault来阻止刷新

$('#submit').click(function(event){
        //your code here
      event.preventDefault();
    }

【讨论】：