POST后如何通过fetch重定向页面答案

【问题标题】：How to redirect page after POST by fetchPOST后如何通过fetch重定向页面
【发布时间】：2021-10-16 14:29:35
【问题描述】：

我正在从有效的客户端向后端发送注册数据。我在 MongoDB 中看到我的数据，所以没关系。但是在单击“注册”按钮后，我想重定向到其他页面“/client/components/login/login.html”并且重定向不起作用。我的FORM 标签看起来像这样：

<form action="http://localhost:3000/register" method="POST">
    <div>
        <label for="register">Login</label>
        <input type="text" id="login" name="login" class="login" required>
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password" class="password" required>
    </div>    
    <div>
        <label for="password2">Repeat Password</label>
        <input type="password" id="password2" name="password2" class="password2" required>
    </div>
    <!-- <button type="submit" id="post-btn">Register</button> -->
    <input id="post-btn" type="submit" value="Register">       
</form>

这是我通过fetch发布数据的代码：

register = async () => {
    let url = 'http://localhost:3000/register';
    await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'manual',
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = data.url;
        } else {
            document.getElementById('message').textContent = data.message
            window.location.href = data.url;
        }
    })
    .catch(err => {
        document.getElementById('message').innerHTML = err
    });
};

document.getElementById('post-btn').addEventListener('click', register);

我从后端收到这样的数据：

{"success":true,"message":"User has been created","url":"/client/components/login/login.html"}

我在谷歌上搜索到window.location.href 可以发生重定向，但它不会发生，点击“注册”后我在“http://localhost:3000/register”页面上。我什至不知道如何从 fetch 中的第二个 then 到 console.log(data)，因为单击“注册”后我会立即登陆“http://localhost:3000/register”。

感谢您的帮助。

【问题讨论】：

标签： javascript html api fetch

【解决方案1】：

当您点击提交按钮时，它会触发 JS，但 fetch 正在异步发出 HTTP 请求表单正常提交。这会触发导航并取消 JS。

您需要防止点击提交按钮的默认行为。

register = async (clickEvent) => {
    clickEvent.preventDefault();

注意：一般应该绑定到表单上的提交事件，而不是提交按钮的点击事件。

【讨论】：

我以前试过这个，但不起作用，但是谢谢。
@misugi — 在其他条件相同的情况下，这将解决问题。除了在您的问题中清晰可见的问题之外，您可能还有其他问题（例如 document.getElementById('post-btn') 返回 null 会在控制台中出现错误）。
document.getElementById('post-btn') 不为空，它应该是:) 在 addind preventDefault() 之后，然后在我点击“注册”按钮之后什么也没发生，甚至我的数据也是不发送到后端。
并且错误是：“未捕获（承诺中）ReferenceError：数据未在HTMLInputElement.register中定义”，也许我会尝试自己处理，谢谢:)
它工作正常！！ !

【解决方案2】：

尝试这样做

register = async() => {
   window.location.href = `${website_url}/client/components/login/login.html`
   // your code
}

【讨论】：

这将重定向 before 发出 POST 请求（除非它会被常规表单提交取消，因此它不会像现有代码一样起作用）。