如何停止 javascript post 上的页面刷新

Question

我正在使用 html、css、flask 和 vanilla javascript 以及 ajax 创建 Flask 应用程序。 我使用 Javascript 的经验为零，我编写的所有代码都来自互联网，试图将事物拼凑在一起。 我正在创建一个联系表单，在提交联系表单后，我希望主联系表单消失并显示一条消息： 代码本身的工作原理就像发送一样，电子邮件会创建对数据库的新提交，但整个页面现在根本不会刷新，也不会显示第二个 div。如下所示。我遇到的问题是这样的。如果我使用而不是表单要求工作，但它会刷新，但如果我使用按钮，表单要求不起作用，但它不会刷新页面。 我不太擅长在堆栈上发布问题，所以如果您有疑问，请询问 示例：

<form>
<div>
    <h2> main form </h2>
    <button type = "submit" onclick="saveContactForm();return false">Submit</button>
</div>
<form>
<div>
<h2> show after form submit>
</div>

我的js是

function saveContactForm() {
    var formData = {
        name: $("input[name='name']").val(),
        email: $("input[name='email']").val(),
        subject: $("select[name='subject']").val(),
        message: $("textarea[name='message']").val(),
    };
    $.ajax({
        url:  baseUrl,
        type: "POST",
        contentType : "application/json",
        data: JSON.stringify(formData),
        success: function (response) {
             autoReply(formData.email,formData.subject,formData.message)
                
           

        },
        error: function (error) {
            alert('Email failed to send:', error);
        },
    });

}
function autoReply(email,subject,message) {
    let parms = {
        email: email,
        subject: subject,
        message: message 
    };
    service_id = secret;
    template_id = secret;
    public_key = secret;
    
    emailjs.send(service_id, template_id, parms, public_key).then(function(response) {
        document.querySelector(".container").style.display="none";
        document.querySelector(".back").style.display="flex";
    }, 
    function(error) {
        console.error('Email failed to send:', error);
    });
}

我试图让我的提交按钮不刷新页面

Answer 1

正确的是在函数顶部使用

event.preventDefault()

saveContactForm()

。因此，这意味着属于该事件的默认操作不会发生。

在 button type='submit' 中，它总是尝试在服务器级别提交表单并刷新页面。因此，要保留此默认事件调用，您必须传递顶部的

event.preventDefault()

。