这是表单html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form" action="" name="form" class=" f-color " >
<div class="form-group ">
<label for="contactusername">Name</label>
<input type="text " name="name" class="form-control " placeholder="Enter Your Name" id="contactusername " required>
</div>
<div class="form-group ">
<label for="contactemail ">Email</label>
<input type="email " name="email" class="form-control " placeholder="Enter Your Email" id="contactemail " required>
</div>
<div class="form-group ">
<label for="contactcomment ">Your Message</label>
<textarea name="msg" class="form-control " placeholder="Enter Your Message Here" rows="5 " id="contactcomment " required></textarea>
</div>
<input type="submit" name="submit" value="Send" class="btn btn-block bg-light mt-4 py-3 text-uppercase font-weight-bold">
</form>
</body>
</html>
使用的Ajax代码
<script>
$(function () {
$('form').bind('submit', function () {
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</script>
process.php在这里
<?php
if(isset($_POST['submit'])){
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['msg'];
$to='email@gmail.com';
$subject='Form submission';
$message="Name: ".$name."n"."message:".$message;
$headers="From: ".$email;
if(mail($to, $subject, $message, $headers))
{
echo "<h1>Sent success! Thank you"." ".$name."</h1>";
}
else{
echo "Something went wrong!";
}
}
?>
当我在表单上运行process.php时，我会在电子邮件中收到表单提交，但页面会变为一个空白页面，并显示成功消息。为了避免这种情况，我尝试使用ajax，但失败了。作为一个初学者，我陷入了困境。帮助我解决这个问题，以及我如何显示"；提交成功"；同一个窗口上的消息？。
当您成功使用ajax时，您应该将数据放在某个位置，例如我放在最后一行。
<script>
$(function () {
$('form').bind('submit', function () {
$.ajax({
type: 'post',
url: 'process.php',
data: {name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), msg: $('input[name="msg"]').val(), submit: true},
success: function (result) {
document.body.appendChild(result);
}
});
return false;
});
});
</script>
新增：最有可能的是，问题还可能是您将提交事件绑定到按钮。试试这个：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form" action="" name="form" class=" f-color " >
<div class="form-group ">
<label for="contactusername">Name</label>
<input type="text " name="name" class="form-control " placeholder="Enter Your Name" id="contactusername " required>
</div>
<div class="form-group ">
<label for="contactemail ">Email</label>
<input type="email " name="email" class="form-control " placeholder="Enter Your Email" id="contactemail " required>
</div>
<div class="form-group ">
<label for="contactcomment ">Your Message</label>
<textarea name="msg" class="form-control " placeholder="Enter Your Message Here" rows="5 " id="contactcomment " required></textarea>
</div>
<div class="btn btn-block bg-light mt-4 py-3 text-uppercase font-weight-bold" onclick="sendLetter()" >Send</div>
</form>
</body>
</html>
<script>
function sendLetter() {
$.ajax({
type: 'post',
url: 'process.php',
data: {name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), msg: $('input[name="msg"]').val(), submit: true},
success: function (result) {
document.body.appendChild(result);
}
});
}
</script>