我使用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>
可能你的页面被刷新了，尝试使用preventDefault来阻止刷新
$('#submit').click(function(event){
//your code here
event.preventDefault();
}
您有一个类型为"submit"的按钮。
<input type="submit" id="submit" value="Save">
当点击事件发生在这个按钮上时，表单将被发送到服务器。您没有在表单上定义action属性，因此它在提交后重定向到相同的URL。
正如Sterko所说，您可以使用事件处理程序来防止提交按钮提交表单。