javascript - 提交表单并刷新页面而不将刷新添加到导航历史记录中

Question

我正在 Flask 上构建一个小型网络应用程序，但在导航回上一页时遇到了一个相当乏味的问题。

我尝试过的:

• 没有离开页面 - 内容已过时

• 重定向到同一页面返回 - 返回导航中断(因为操作再次执行)

• 使用 JS 并使链接执行 document.history.go(-2) 或 document.history.go(-1) - 导致问题CSP(到目前为止，我已经设法在没有 JavaScript 的情况下完成)，进行的多次编辑导致返回导航最终出现在同一个网站上，这是糟糕的 UX(我可以保留一个计数器，但这并不能解决下一个问题这种方法)，它还会将页面保留在导航历史记录中，继续前进

• 跟踪所有访问过的页面并根据它生成反向链接 - 导致 url 堆积垃圾，还会导致 URL 过长的问题，并且它们不适合在用户之间共享。

所以这一切都归结为那些麻烦的 POST 操作。有什么方法可以只是刷新页面(但如果需要则重定向到错误页面)？

Answer 1

在您的 HTML 中包含一个准系统表单，所有输入设置都正常。

<form id='example-form'>
    <!-- inputs here... -->
    <input type='submit' id='form-submit-button'></input>
</form>

然后在你的 JS 中为此编写一个处理程序，我在下面使用 jQuery 编写了它

$('#form-submit-button').on('click', function() {
    $.post('example.domain.com/formSubmit', $('#example-form').serialize(), function() {
        //success - do whatever you need to do here
        window.location.reload();
    }
}).fail(function() {
    //error - you can redirect your user to an error page here or whatever
    alert('error');
});

我还没有对此进行测试，所以如果它不能立即工作，我深表歉意 - 查看 jQuery 文档以获取有关 jQuery ajax 函数的更多信息，一旦您开始编写它们，它们就会变得容易得多。

处理 DOM 事件 - https://api.jquery.com/on/

发送 Ajax 调用 - https://api.jquery.com/jquery.post/