Question

我正在使用nodeJs，车把和JavaScript通过后期操作提交表单，但是表单提交要花一些时间，因为如果有人刷新创建的页面，则提交表单时会在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>

Answer 1

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

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

Answer 2

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

window.onbeforeunload = function() {
    return true;
};

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

Answer 3

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

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

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

3 个答案: