javascript - 快速表单处理，无需重定向。有数据但没有preventDefault，但重定向。不使用 PreventDefault 进行重定向，但没有数据

Question

现在陷入了第 22 条陷阱。我使用自定义表单提交来避免在发布表单时遇到快速路由时进行重定向，但是，如果不重定向，我会丢失正在发送的数据。

document.getElementById('playerSearchForm').onsubmit = function(_event)
{
    _event.preventDefault();

    var XHR = new XMLHttpRequest();
    XHR.addEventListener('load', function(event)
    {
        var res = JSON.parse(event.currentTarget.response);
    });

    XHR.addEventListener('error', function(event)
    {
        // error handling
    });

    XHR.open('POST', '/createGame');

    var formData = new FormData();
    formData.append('username', document.getElementById("usernameInput").value);

    XHR.send(formData);
}

以上是我提交表单的方式。如果我有 _event.preventDefault() 在那里，那么我的页面不会重定向，这是预期的结果。但是，_event.preventDefault 也会阻止用户名在我的快速 route 的 req.body 上可用。如果我取出 _event.preventDefault()，那么我就可以访问 req.body 中的用户名，但是页面会重定向。是否有另一种发送数据的方法而不是使用 FormData，或者我可以调用 PreventDefault 中的某些内容来确保数据可用？

Answer 1

好的，我找到了解决方案。

我的部分问题是，简单地从一开始删除 _event.preventDefault() 就意味着表单提交会发生两次。

另一个问题是 FormData 的发送方式不可字符串化 ( MDN Source )。我没有深入研究文档，但我假设我使用的默认正文解析无法处理 FormData。为了解决这个问题，我完全删除了 formData，并且只是发送 XHR 请求，如下所示:

XHR.send('username='+document.getElementById("usernameInput").value);

我不确定这是否是正确的做法，但它确实有效。