我有一个表单，我希望在不刷新页面的情况下插入和处理提交的表单，为此我使用的是 ajax 但是，表单是我预期的提交者但是在此之后表单不会重置为空
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').submit(function(e){
e.preventDefault(); // prevent the form from submitting normally
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax({
type: 'POST',
url: 'insert.php',
data: {name: name, email: email, message: message},
success: function(data){
alert('Form submitted successfully!');
},
error: function(data){
alert('An error occurred while submitting the form.');
}
});
});
});
</script>
</head>
<body>
<hr>
<h2 id="title">Contact Us</h2><br>
<div class="container">
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<p class="mb-0" style="color: gold;"><strong>Phone:</strong></p>
<p class="mb-0"><?php echo $rowsite["mainphone"];?></p>
<br>
<p class="mb-0" style="color: gold;"><strong>Email:</strong></p>
<p class="mb-0"><?php echo $rowsite["mainemail"];?></p>
<br>
<p class="mb-0" style="color: gold;"><strong>Address:</strong></p>
<p class="mb-0"><?php echo $rowsite["mainaddress"];?></p>
</div>
<div class="col-lg-6">
<form id="contact-form" action="insert.php" method="POST" role="form" autocomplete="off">
<div class="form-group">
<label for="name" style="color:gold;">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email" style="color:gold;">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message" style="color:gold;">Message</label>
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn" style="background-color:gold; color:white">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html><?php
// Check if the form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
include "connect.php";
// Get the form data
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// Prepare and execute the SQL INSERT statement
$stmt = $conn->prepare("INSERT INTO contacts (name, email, message) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $message);
$stmt->execute();
// Check if the insert was successful and show an alert message
if ($stmt->affected_rows > 0) {
echo "<script>alert('Your message was successfully submitted!');</script>";
header("Refresh:0"); // Reload the page to clear the form fields
} else {
echo "<script>alert('Sorry, an error occurred while submitting your message. Please try again later.');</script>";
}
// Close the statement
$stmt->close();
}
?>我可能弄错了什么？代码工作正常，将捕获的所有信息插入数据库并发出我想要的警报。我的问题是我不想刷新页面，但我也希望在成功插入数据后重置字段
/*
$('#contact-form').trigger("reset");
// 其次你可以使用 $('.form-control').val("");