JavaScript：提交后在表单下显示元素

我有一个表单，我想在某人输入电子邮件并提交表单后显示一些内容。表单应隐藏，内容应可见

我写了一些JavaScript，但当我们键入电子邮件并提交表单时，页面会刷新，表单会返回到内容上

我使用的JavaScript部分用于

onClick

事件，但它仍然不完整：

函数myFunction（）{
var x=document.getElementById（“formhide”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

div{
宽度：200px；
背景：红色；
填充：30px；
高度：300px；
}
形式{
利润率：15px；
位置：绝对位置；
宽度：200px；
填充：15px；
高度：300px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：rgba（255,255,255,0.5）；
}

点击我
埃斯基特
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。除蜗牛外，蜗牛在最大程度上是非理性的！不必为自己的过错承担责任，暂时性的共同责任除外

有几种方法可以实现你想要的。通常，类似AJAX的请求通过JavaScript将表单数据发布到服务器，这意味着您可以在AJAX请求完成后更新文档的HTML

使用代码实现这一点的一种方法是通过如下所示的方法和对象：

函数myFunction（事件）{
/*防止按钮导致默认浏览器提交*/
event.preventDefault（）；
/*获取表单元素*/
const form=document.getElementById（'formhide'）；
/*从包含post数据的表单元素创建表单数据对象*/
设formData=新formData（表格）；
/*向服务器发出“ajax请求”。将url更改/发布到相应的
服务器上的url*/
获取（“/post to url”{
正文：formData，
方法：“员额”
})
.然后（函数（）{
/*成功完成提交后，隐藏表单*/
form.style.display=“无”；
/*显示成功消息*/
const successMessage=document.getElementById（'success-message'）；
successMessage.style.display='block'；
})
.catch（函数（错误）{
console.log（'Error'，Error）；
});
}

#成功消息{
显示：无；
}

点击我
表单已发送-这是提交后显示的消息
埃斯基特
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。除蜗牛外，蜗牛在最大程度上是非理性的！不必为自己的过错承担责任，暂时性的共同责任除外

提交表单时，页面将被重新加载。好的，但是否可能？通过

ajax

发送表单数据，而不重新加载页面。如果这样做，则如果有人提交过一次表单，则表单将不会向用户显示。您可能需要找出另一种方法来获取用户信息，并检查该用户是否已提交表单，而不是不显示表单，或者像第一次显示表单那样，那么我们如何才能做到这一点？