使用 ajax 或 javascript 时如何防止重复提交？答案

【问题标题】：How to prevent repeatative submit while using ajax or javascript?使用 ajax 或 javascript 时如何防止重复提交？
【发布时间】：2020-10-08 06:58:54
【问题描述】：

我在 c# 中有一个控制器，并且在控制器内部有一个保存方法。 save 方法保存/更新通过提交按钮单击和 javascript 提交的数据。问题是，如果您多次单击按钮，它应该只处理第一次单击，其余的应该被识别为重复提交，应该被控制器丢弃。如何在 c# mvc web 应用程序中做到这一点？

【问题讨论】：

为表单提供一次性令牌。当服务器收到返回的令牌时，它可以决定它是否已经被使用。或者，您知道，只需在客户端禁用提交即可。
是否有任何库可以做到这一点，或者我需要手动维护它？
可能有。我不知道。我通常只是禁用按钮客户端（为用户提供适当的反馈）。
您可以在保存按钮时禁用该按钮，也可以使用“isSaving”之类的布尔标志，以便在操作开始时检查此标志。
使用 javascript 禁用按钮不是一个好主意，因为如果用户知道如何启用该标志，那么它没有任何好处。

标签： javascript c# jquery ajax

【解决方案1】：

点击后禁用该按钮。所以只需点击一次即可。

【讨论】：

但是任何有 javascript 技能的人都可以从用户端启用它
是的，当然可以。但如果它现在有效，我认为这很好。他以后可以考虑加密并使他的代码更安全。
@eliaszaman 任何有一定技能的人也可以手动执行请求

【解决方案2】：

简单的方法

当按钮单击禁用它然后在您从 ajax 获得响应结果后再次激活！你还可以添加加载器，让你的网站看起来很酷！

<button id="btnSend" onClick="send()">submit</button>

<script>

btnSend=document.getElementById("btnSend");

function send(){

  btnSend.disabled=true;
  //set disabled button here

  $.ajax({ type: "GET",   
           url: "http://www.google.de",   
           async: false,
           success : function(text)
           {
                btnSend.disabled=false;
                //set active to button 
                
                // add your code here
           },

           fail : function(text)
           {
                btnSend.disabled=false;
                //set active to button 

                // add your code here
           }
  });

}

</script>

【讨论】：

【解决方案3】：

我还会禁用客户端的按钮。但您也可以检查提交的数据是否与存储的数据不同。如果没有进行任何更改，您可以直接返回而无需进一步保存逻辑。

应该可以只保存一次数据吗？在特殊情况下，保存后重定向到不同的视图可能是一种可能的解决方案。

【讨论】：