如何在表单提交时防止表单在刷新时重新提交

Posted 2023-03-07

【中文标题】如何在表单提交时防止表单在刷新时重新提交

【英文标题】：How to prevent form resubmit on refresh while form is submitting

【发布时间】：2019-07-20 09:52:57

【问题描述】：

我正在使用 nodeJs、handlebars 和 javascript 来提交带有 post 操作的表单，但由于在提交表单时如果有人刷新它创建的页面，有大量数据要存储在 DB 子中，因此表单提交需要时间数据库中的重复数据。 你能告诉我如何防止这种情况发生吗？

我创建了一个按钮来提交表单并使用这样的Js提交。

function sumitform() 
  var myform = document.getElementById("myForm");
  myform.submit();

<form id="myForm" action="/path/toNodePostApi" method="post">
  <input name="name" value="data">
  <input id="btnsubmit" class="btn" type="button" value="submit" onclick="sumitform()">
</form>

【参考方案1】：

document.getElementById("myForm").addEventListener("click", function(event)
  event.preventDefault()
);

它可以防止在单击按钮时重新加载 单击“提交”按钮，阻止其提交表单 点击链接，防止链接跟随网址

【参考方案2】：

您可以要求用户确认他们想离开（或重新加载，在这种情况下）页面：

window.onbeforeunload = function() 
    return true;
;

此外，您可以将数据存储在会话中。检查页面加载时会话中是否有数据。如果它在那里，则页面已重新加载，您可以进行 api 调用以在服务器上采取适当的操作以删除先前发送的数据（或首先阻止它从客户端再次发送）。

【参考方案3】：

您可以在按下按钮后禁用该按钮，但这不会让用户表单“刷新”页面并重新提交值。

在我的情况下，我在执行此操作时会显示“正在工作或提交”图标，但您必须在服务器端进行验证。这只会让用户知道，页面正在处理某些事情，然后再点击刷新。