Question

我使用jquery的.submit（）来拦截用户的提交事件，但是我发现了一个问题。

当用户单击提交按钮时，表单正常提交，但如果用户故意多次快速单击，则会多次提交，这将导致数据库中的重复数据。

这类问题的解决方案是什么？

更新：嗯，我看到一些建议说禁用提交按钮。这应该可以防止多次提交表单，但问题是我的页面中的表单元素没有刷新，如果我禁用它，用户将无法再提交它，禁用15秒可能会有效，但是这是解决这个问题的正确方法吗？

Answer 1

禁用提交按钮确实是可行的方法。

但是，在很多情况下，要执行的服务器端逻辑取决于请求参数映射中是否存在提交按钮的名称 - 值对。特别是在基于服务器端组件的MVC框架（如MS ASP.NET和Sun JSF）中，以及具有多个提交按钮的“简单”形式。按下的提交按钮的名称 - 值对是必需的，用于确定要执行的操作。禁用该按钮会使其名称 - 值对完全消失在请求参数映射中，并且服务器端可能不会采取任何操作或执行错误的操作。

基本上有两种方法可以解决这个问题：

使用setTimeout()在几毫秒后禁用该按钮，以便无论如何都会发送其名称 - 值对。 50毫秒是一个负担得起的数额。

$("form").submit(function() {
    var form = this;
    setTimeout(function() {
        $(':submit', form).attr('disabled', true);
    }, 50);
});

将实际按下的提交按钮的名称 - 值对复制到表单的隐藏输入中。这有点棘手，因为submit的{{1}}事件中没有此信息。您需要让<form>捕获最后点击的元素。
```
$(document)
```

更新：根据您的更新：

嗯，我看到一些建议说禁用了提交按钮。这应该阻止多次提交，但问题是我的页面中的表单元素没有刷新，如果我禁用它，用户将无法再提交它，禁用15秒可能会有效，但这是解决这个问题的正确方法？

所以你实际上是在发出一个ajaxical请求。你可以重新启用jQuery的ajax函数的回调处理程序中的按钮。假设您正在使用jQuery.post：

$("form").submit(function() {
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $.lastClicked.name,
        value: $.lastClicked.value
    }));
});

$(document).click(function(e) {
    e = e || event;
    $.lastClicked = e.target || e.srcElement;
});

Answer 2

禁用jQuery函数中的Submit按钮。

http://jquery-howto.blogspot.com/2009/05/disable-submit-button-on-form-submit.html

Answer 3

尝试在表单提交中禁用提交按钮....

$("form").submit(function() {
    $(':submit',this).attr('disabled','disabled');
    $('selector').load(url,function(){
       $(':submit',this).removeAttr('disabled');
    })
});

quick demo

Answer 4

真正的问题在于数据库层，它必须设计为防止重复。这是一个普遍但有点难看的解决方案：

最初渲染页面时，您可以创建GUID。比如，操作ID。并将其置于视图状态。当您在服务器端处理事件时，只需将此guid插入表中，例如OngoingOperations，它是主键。第一次插入将成功，其他将失败。对于cource而言，为了更加用户友好，您可以跳过后续操作并返回第一个操作的状态。

OngoingOperations表可能如下所示：

CREATE TABLE OngoingOperations（ OperationID uniqueidentifier主键， OperationDate datetime默认getdate（）， OperationStatus nvarchar（max））;

OperationStatus - 是状态消息或从后续提交返回到客户端的任何数据。在这里，您可以根据需要使用标志（好或不好）或详细消息。

这个表需要收集旧记录，比如每小时你只需删除2个或更多小时之前完成的操作。

Anton Burtsev

Answer 5

试试这个：

$("form").submit(function() {
    var form = this;
    setTimeout(function() {
        $(':submit', form).attr('disabled', true);
    }, 50);

    setTimeout(function() {
        $(':submit', form).removeAttr('disabled');
    }, 1000);
});

使用jquery来防止重新提交表单

5 个答案: