Javascript 使用验证和Ajax提交JQuery表单（引导）

我正在努力使用javascript脚本，该脚本应该使用ajax验证和提交表单。 一切正常，但由于某些原因，ajax部分无法正常工作。单击submit之后，它似乎做得很好，但在最后一秒钟，它将我重定向到.php文件，并返回它应该返回的成功消息

有点难以解释。表单已正确发送，但未按预期保留在form.html页面上

我远非javascript的专业人士。你们能看看我的剧本，告诉我我做错了什么吗

$（函数（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
if（form.checkValidity（）==true）{
$.ajax({
类型：“POST”，
url:“email/personal contact.php”，
数据：$（this）.serialize（），
成功：功能（数据）
{
//消息类型：成功/危险+消息
var messageAlert='alert-'+data.type；
var messageText=data.message；
//引导警报框HTML
var alertBox='×；'+messageText+''；
if（messageAlert&&messageText）{
//将警报注入到.messages div
$（'#returnmessage'）.html（alertBox）；
//清空表格
$（'#personalcontactform'）[0]。重置（）；
$（“#personalcontactform”）.removeClass（'was-validated'）；
}
}
});
}
}，假）；
});
}，假）；
});
您应该始终调用
事件.preventDefault（），无论表单是否有效。使用您当前的代码，表单也将以常规方式提交，这将给出您描述的结果。这就是解决方案。非常感谢。