好吧，一切都在标题中，但我会解释更多:-)
我的 rails 应用程序包含许多表单（Ajaxified 与否）。
为了防止用户提交两次或更多的某些表单，我使用了 Javascript。
我有一个 Ajaxified 表单的场景：
现在我想添加服务器端代码，以在用户绕过 javascript 时保持干净。
有什么建议么？
您可以将选项 :disable_with => "Please Wait..." 添加到提交标签。
我在 4 种情况下使用 4 种方法，请先在这里使用我的 awnser：Prevent double submits in a Rails AJAX form
使用 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 的 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" />
这是宝石：<a href="https://github.com/mlanett/redis-lock" rel="nofollow noreferrer">https://github.com/mlanett/redis-lock
Redis.current.lock("#{current_user.id}.action_name") do
# Some code
end
尝试使用 Redis 锁定并用类似的东西包围你的块
Redis.current.lock("#{current_user.id}.action_name") do
# Some code
end
这是我正在使用的宝石 https://github.com/mlanett/redis-lock
这是我要做的：
这不会阻止重复提交，但至少会阻止第二次提交的更改。即，当用户第二次提交表单时，代码将根据数据库中的令牌检查提交的令牌，如果它们不匹配 - 不要更新对象。
这对新创建的对象也有不利影响（即，如果用户想要创建评论或类似的东西）。但在这种情况下，您可能想要检查来自同一用户的创建时间间隔，如果它小于 5 秒 - 您将阻止对象被“创建”。
不是一个真正的建议（我不会对不赞成票感到惊讶），但是您的网站在没有 JS 的情况下仍然可以使用吗？向他显示适当的消息如何正常操作他需要启用 JS，否则您不会在页面上向他显示大量的表单。
1) 还可以显示一些移动指示器，让用户知道正在发生的事情，他们的请求正在处理中，这很好。它应该消除大量的双重提交。
2）如果用户禁用了javascript，你将如何提交“ajaxified”表单？如果网站在没有 javascript 的情况下无法运行，那么最好只通知用户（就像Eimantas建议的那样）。
编辑
此类指标的一个示例，只是为了清楚我在 1 中的意思。
http://www.netzgesta.de/busy/
不确定这是否有帮助：
在服务器端：
在新加载表单时，设置 session['variable']=false //表示表单尚未提交。
在表单提交时，检查：
if session['variable'] == true
{
do nothing...
}
else
{
set session['variable'] = true;
//do submit logic here
}
我碰巧也遇到了同样的问题，我已经用一个非常简单的方法解决了（可能是不合适的或者它存在一些我没有注意到的错误，如果你发现了请告诉我）
这是我的答案：
$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!!
我面临的最大问题是，如果我只是在单击提交按钮后立即禁用它，则提交请求将不会提交，并且页面只会挂在那里，因为什么都没有发生。
我认为原因是“禁用”属性阻止提交请求提交。（虽然我不知道这两者之间的关系是什么......）
所以，我认为禁用事件应该在提交事件之后执行。
据我了解，表单提交是一个 Javascript 事件，而 setTimeout 是一个异步方法。由于 Javascript 基于事件循环执行，ajax 事件将放在事件队列的末尾，并且只有在所有同步事件完成后才会执行。
在我的代码中，第一次点击后，提交按钮会在0毫秒后被禁用，这是人类不可能第二次点击的，问题解决了！