我的 Ajax 输出在一秒后消失

Question

我在 Ajax 中使用带有表单的 Ajax 我使用了 if 条件来验证如果我的表单为空，它应该显示一条消息，说明所有字段都是必需的，如果字段已填写应该以 dB 为单位添加数据并显示一条成功消息，尽管一切都运行良好，除了一件事是我的输出只显示一秒钟然后自动消失任何人都可以在这方面帮助我：

`

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

`

Answer 1

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

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

Answer 2

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

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

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

后重定向

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

我的 Ajax 输出在一秒后消失

My Ajax output is disappearing after one sec

php

ajax

forms

ajaxform