如何在不使用原始 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);
    });