在rails控制器中，如何防止双重提交（当用户双击提交按钮或按两次回车键时）？

Question

好吧，一切都在标题中，但我会解释更多一点:-)

我的 Rails 应用程序包含许多表单（Ajax 化或非 Ajax 化）。

为了防止用户提交两次或多次某些表单，我使用了 Javascript。

我的 Ajax 化表单场景如下：

• 用户提交表单（clic 或 Enter），
• javascript 禁用提交按钮，
• rails 控制器执行操作（例如 Soap 请求或插入数据库），
• rails 控制器更新页面并启用如有必要，请提交按钮（以防出现错误）

现在我想添加服务器端代码，以便在用户绕过 javascript 时保持内容真正干净。

有什么建议吗？

Answer 1

我的情况（Rails 7+），我

= form_with model:, url:, data: { turbo: false } do |form|`

删除 data: { Turbo: false } 解决了这个问题。

Answer 2

我碰巧也遇到了同样的问题，我用一个非常简单的方法解决了它（也许它不正确或者存在我没有注意到的错误，如果您发现请通知我）

这是我的答案：

$submitButton.on('click', function(e) {
  setTimeout(() => {
    $(this).attr('disabled', '');
  }, 0);
});

我面临的主要问题是，如果我双击原来的按钮，它会提交两次请求并导致不可预测的情况，因此我尝试在单击按钮后立即使用“禁用”属性来阻止该按钮。这是我写的。

// !!this is an incorrect example!!
$submitButton.on('click', function(e) {
    $(this).attr('disabled', '');
});
// !!don't copy this!!

我面临的最大问题是，如果我在单击提交按钮后立即禁用它，则提交请求将不会提交，并且页面将挂在那里，因为什么也没有发生。

我认为原因是“disabled”属性阻止了提交请求的提交。（虽然我不知道这两者之间有什么关系......）

所以，我认为禁用事件应该在提交事件之后执行.

据我了解，表单提交是一个Javascript事件，而setTimeout是一个异步方法。由于Javascript是基于事件循环执行的，ajax事件会被放在事件队列的末尾，并且只有在所有同步事件完成后才会执行。

在我的代码中，第一次点击后，提交按钮将在0毫秒后被禁用，这对于人类来说是不可能点击第二次的，问题解决了！

Answer 3

不确定这是否有帮助：

在服务器端：

1. 在表单的新加载上，
   set a session['variable']=false //表示表单尚未提交。

2. 提交表单时，检查：

   if session['variable'] == true
   {
      什么都不做...
   }
   别的
   {
      设置会话['变量'] = true;
     //这里提交逻辑
   }
   

Answer 4

1）最好还显示一些移动指示器，让用户知道正在发生某些事情，他们的请求正在处理。它应该消除大量的双重提交。

2）如果用户禁用了javascript，你将如何提交“ajaxified”表单？如果网站在没有 JavaScript 的情况下无法正常工作，那么最好只是通知用户（就像 Eimantas 建议的那样）。

编辑
此类指标的一个示例，只是为了清楚我在 1 中的意思。
http://www.netzgesta.de/busy/

Answer 5

这不是一个真正的建议（我不会对反对票感到惊讶），但是如果没有 JS，你的网站仍然可以使用吗？向他显示适当的消息如何，为了正常操作，他需要启用 JS，否则你不会在页面上向他显示大量的表单。

Answer 6

这就是我要做的：

1. 将“令牌”字段添加到数据库中即将更改的对象。
2. 将该标记放入修改所述对象的表单中。
3. 修改后立即使用新令牌保存该对象。
4. 在其他页面视图中使用该标记。

这不会阻止重复提交，但至少会阻止第二次提交的更改。即，当用户第二次提交表单时，代码将根据数据库中的令牌检查提交的令牌，如果它们不匹配，则不对对象进行更新。

这对于新创建的对象也有一个缺点（即，如果用户想要创建评论或类似的东西）。但在这种情况下，您可能想要检查同一用户的创建时间间隔，如果小于 5 秒，您将阻止“创建”对象。

Answer 7

尝试使用 Redis 锁定并用类似

Redis.current.lock("#{current_user.id}.action_name") do
   # Some code
end

This is the gem I'm using 的 东西包围你的块
https://github.com/mlanett/redis-lock

Answer 8

您可以添加选项：disable_with => “请稍候...”到提交标签。

Answer 9

我对 4 个场景使用 4 种方法，请首先在这里选择我的 awnser：防止Rails AJAX表单中的双重提交

仅对用户进行点击限制：

使用stopImmediatePropagation并向目标dom添加点击事件。

  /**
   * 防止按钮重复点击。
   * NOTICE: #1 需要在作用点之前调用此方法 #2 stopImmediatePropagation 会阻止后面的所有事件包括事件冒泡
   * @delay_duration 两次点击的间隔时间
   */
  $.fn.preventMultipleClick = function (delay_duration) {
    delay_duration = delay_duration || 3000;
    var last_click_time_stamp = 0;
    var time_duration = 0;
    $(this).bind('click', function (event) {
      time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
      //console.debug("preventMultipleClick", last_click_time_stamp, time_duration);
      if (time_duration && time_duration < delay_duration) {
        event.stopImmediatePropagation();
      } else {
        //console.debug("skip preventMultipleClick~");
        last_click_time_stamp = event.timeStamp;
      }
    });
  };

限制ajax等提交：

使用ajax的beforeSend属性。

  /**
   * 使用：
   *   在jquery的ajax方法中加入参数:beforeSend
   *   例如：beforeSend: function(){return $.preventMultipleAjax(event, 5000)}
   *
   * @param event
   * @param delay_duration
   * @returns {boolean}
   */
  $.preventMultipleAjax = function (event, delay_duration) {
    delay_duration = delay_duration || 3000;
    var target = $(event.target);
    var last_click_time_stamp = target.attr("_ajax_send_time_stamp") || 0;
    var time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
    //console.debug("preventMultipleAjax", last_click_time_stamp, time_duration);
    if (time_duration && time_duration < delay_duration) {
      return false;
    } else {
      //console.debug("skip preventMultipleAjax~");
      target.attr("_ajax_send_time_stamp", event.timeStamp);
      return true;
    }
  };

仅适用于形式：

<%= f.submit "Save annotation", :disable_with => "Saving...", :class => "btn btn-primary", :id => "annotation-submit-button" %>

或：
禁用：表单对表单元素，按钮等作业，会阻止其上的事件触发

<input type="submit" value="submit" />
<input type="button" value="button" />
<input type="image" value="image" />

其他：

这是gem：https://github.com/mlanett/redis-lock

Redis.current.lock("#{current_user.id}.action_name") do
   # Some code
end