Javascript 更改联系方式'；验证和邮件发送后的html

我正在为我的页面开发一个php支持的联系人表单，在点击提交按钮并且（！）发送邮件之后，我想替换HTML的内容。到目前为止，我可以管理，在点击

.btn

之后，HTML会被替换，但这发生在任何验证和邮件发送之前。你能告诉我怎么做吗？非常感谢

$（文档）.ready（函数（）{
var newHTML='谢谢您的留言！
我们会尽快回复您！'；
$（'.btn'）。单击（函数（）{
$（'.form'）.html（''）.append（newHTML）；
});
});
。联系方式{
边缘顶部：30px；
边缘底部：70像素；
}
.联络表格h1{
边缘底部：70像素；
}
.联络表格输入{
宽度：70%；
保证金：10px自动20px自动；
}
.信息文本区{
最大宽度：80%；
宽度：80%；
保证金：10px自动20px自动；
高度：100px；
}
.联络表格{
背景色：#6f8595；
颜色：白色；
过渡：0.3s；
宽度：50%；
}
.contact form.btn:悬停{
背景色：白色；
颜色：#6f8595；
过渡：0.3s；
}

姓名：

电邮：

信息：

你好，你的网站，
在隐藏表单之前，您应该检查表单是否有效。使用
valid（）
尝试以下操作：

要做到这一点，您需要Ajax

首先，我们需要一个contact.php来完成这项工作，并返回一个回复，通知客户电子邮件是否已发送。
例如：

contact.php

<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
    echo json_encode(['error' => false]);
} else {
    echo json_encode(['error' => true]);
}

你需要ajax来实现这一点是的，我知道很多，哈哈：D但问题是如何实现？非常感谢，现在我可以看到如何在JavaScript中验证PHP部分了！：）在使用代码之后，它只是简单地重定向到thankyou页面，如果我取出重定向头，它会重新加载页面本身。有什么问题吗？我想在不重新加载站点的情况下发送邮件并更改表单的html。我的php看起来像：
if（isset（$\u POST[“btn submit”]）{$to=me@laszlovaszi.com“；$from=$\u POST['email']；$name=$\u POST['name']；$subject='YourSite Customer email'；$message=“”；$message.=$\u POST[“message”]；$message.==”；$headers=“from:”.$from.\r\n“；$headers.=”内容类型：text/html；charset=UTF-8\r\n“；邮件（$to，$subject，$message，$headers）；标题（'Location:thankyou.html'）；}
<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
    echo json_encode(['error' => false]);
} else {
    echo json_encode(['error' => true]);
}

<script>
 $(document).ready(function() {

    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';

    $('.btn').click(function(){
        $.post('contact.php', $('.form').serialize(), function () {
            if (data.error == false) {
                $('.form').html('').append(newHTML);
            }
        })
    });
});
</script>


    <form class="form clearfix">
    <div class="col-sm-6">
        <p>Name:</p>
        <input type="text" name="name" placeholder="Your full name here" required>
        <p>Email:</p>
        <input type="email" name="email" placeholder="Your email here" required>
    </div>
    <div class="col-sm-6">
        <p>Message:</p>
        <div class="message"><textarea name="message">Hello YourSite, </textarea></div>
        <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
    </div>
    </form>