Ajax提交表单并通过PHP验证/发送电子邮件

Question

我正在处理html联系人表单，并在单击“提交”按钮时使用下面的javascript代码来验证表单：

function leftValue(e, t, n) {
$(this).text(t.parent()[0].style.left)
}
$(document).ready(function() {
required = ["name", "email"];
email = $("#email");
errornotice = $("#error");
emptyerror = "Required Field";
emailerror = "Required Field";
$("#contact-us").submit(function() {
for (i = 0; i < required.length; i++) {
    var e = $("#" + required[i]);
    if (e.val() == "" || e.val() == emptyerror) {
        e.addClass("form-error");
        e.val(emptyerror);
        errornotice.fadeIn(750)
    } else {
        e.removeClass("form-error")
    }
}
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
    email.addClass("form-error");
    email.val(emailerror)
}
if ($(":input").hasClass("form-error")) {
    return false
} else {
    errornotice.hide();
    return true
}
});
$("input").focus(function() {
if ($(this).hasClass("form-error")) {
    $(this).val("");
    $(this).removeClass("form-error")
}
})
});

的HTML

<form action="" method="post" name="contact-us" id="contact-us"> 
<input type="text" id="name" name="name"/>
<input type="text" id="email" name="email"/>
</form>
<div id="success">Thank you for your message!</div>

验证通过并再次单击“提交”按钮后，数据将通过PHP发布并使用以下代码通过电子邮件发送：

<?php  
if(isset($_POST['submit']))
{
$to="test@test.com";
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$body="Name: $name \n\n Email Address: $email \n\n";
$sent=mail($to, $body); 
}
?>

我现在尝试使用ajax执行这些功能，并在不重新加载的情况下在同一页面上显示确认消息。 我尝试了下面的代码，该代码允许验证表单，但是当验证通过并再次单击提交时，页面只是重新加载，并且不显示#success div中包含的确认消息？

$(document).ready(function() {
$("#contact-us").submit({
submitHandler: function() {
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post
        $("#contact-us").serialize(), 
        function(data){
          if (data == 'Sent') {
            $("#success").fadeIn(); 

        }
        //
    });
    return false;
}
});
});

Answer 1

您是否尝试过： event.preventDefault();

$(document).ready(function() {
$("#contact-us").submit(function(event) {

event.preventDefault();

$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post
        $("#contact-us").serialize(), 
        function(data){
          if (data == 'Sent') {
            $("#success").fadeIn(); 

        }
    });
    return false;
});
});