如何在不使用原始 Javascript 重定向的情况下发布表单？

Question

我看过几篇关于如何使用 AJAX 发布表单的帖子，但我对简化选项感到好奇。

这是我正在尝试的精简版本：

<form id="message-form" method="POST" action="/send-message" onsubmit="return false;">
    <input type="text" name="message"><br/>
    <input type="text" name="phone_number"><br/>
    <button type="button" onclick="return trysubmit()">Send Message</button>
</form>

<script>
    function trysubmit()
    {
        document.getElementById("message-form").submit();
        
        //notify user of success 

        //cancel the redirect
        return false; 
    }
</script>

在这种情况下，表单被提交，但重定向仍然发生。

像上面这样的事情是可能的，还是我必须手动构建这样的 AJAX 请求？ 表单序列化javascript（无框架）

var form = document.getElementById('message-form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

Answer 1

除非求助于像发布到一个虚拟目标这样的黑客，否则 AJAX 是要走的路。

这有效：

    const form =  document.querySelector("#message-form");
    form.addEventListener("submit", event => {
        event.preventDefault()

        let status = "";
        const data = new FormData(form);
        const req = new XMLHttpRequest();
        try{
            req.open("POST", '/send-message');
            req.send(data);
            status = "success";
        }
        catch{
            status = "failure";
        }
        notifyuser(status);
    });