防止在网页中重复单击按钮答案

【问题标题】：Prevent repeated button clicks in a web page防止在网页中重复单击按钮
【发布时间】：2020-01-10 19:44:23
【问题描述】：

我目前正在构建一个 Django 应用程序，到目前为止我已经实现了两个功能。

1) 以表单形式提交用户数据

2) 从 google sheet 中读取数据并将其显示在网页上。单击数据库中的数据会更新时，此页面上有一个刷新按钮。

问题：- 当用户多次单击提交按钮时，比如说 5 次，相同的数据会被插入 5 次，这是一个巨大的问题。在多次单击刷新按钮的情况下，我会收到类似“重复键值违反唯一约束”的错误

所以，请给我建议一种方法，让按钮不执行多次，以防止重复并处理任何极端情况。

【问题讨论】：

标签： javascript html django forms

【解决方案1】：

您可能希望在单击一次后销毁 eventListener。

function oneTimeEvent(element, eventType, callback) {
   element.addEventListener(eventType, function(e) {
   e.target.removeEventListener(e.type, arguments.callee);
   return callback(e);
 });
}

var btn = document.querySelector('button');
  oneTimeEvent(btn, 'click', function () {
  alert('Hello there! Did you click on me?');
});


<button>Click</button>

并且当用户点击刷新按钮时，可以重新加载页面，并且会重新设置事件监听器。

【讨论】：

我认为这种情况下没有必要，因为您可以简单地禁用该按钮并在服务器端创建一个简短的验证。
公平，但我认为他也会在数据库中刷新后重新加载页面。任何人将如何更新新数据（或插入）？或者您可以采用不那么用户友好的方法让他们自己刷新页面。但你说得很对。

【解决方案2】：

两个简单的步骤：

在javascipt客户端上实现onclick="this.disabled=true,this.form.submit();"
使用HTTP Redirect确认或处理逻辑并显示成功信息；

【讨论】：

我已经有了 onclick js 函数，通过它我通过 AJAX JQUERY POST 方法将数据传递到后端。你想让我用不同的按钮 id（或）类编写另一个 onclick 函数吗？你能详细说明一下吗

【解决方案3】：

Mahesh、Paulo 提出了非常好的观点，但我想补充一点。

由于您已经为您的 AJAX 提供了 onclick 函数，因此您可以在此类事件之后将该按钮设置为 disabled=true。但是，请记住这是客户端，如果我是你，我不会那么信任这个解决方案。
结合解决方案#1，使用model.objects.get_or_create() 方法。这样您就可以检查数据库中是否已经存在相同的记录，从而避免多个/重复数据。

# Example for Sol 2
# views.py

# Example model
from . models import Person

def insert_data(request):
    # Get whatever POST data you're trying to get from your AJAX.
    # I'll use name as an example

    post_name = request.POST.get('name')

    p, created = Person.objects.get_or_create(
        name=post_name,
    )

    # If there is no similar object in the table created = True
    # Else created = False
    # Validate

    if created == False:
      # Meaning there is a similar object existing
      # Return a response with a message saying object already exists?
    else:
      # Do whatever you want.

【讨论】：