Запрет повторных нажатий кнопок на веб-странице

Question

В настоящее время я создаю приложение Django, и я реализовал две функции.

1) Отправка пользовательских данных в форме

2) Чтение данных из Google лист и отобразить его на веб-странице. на этой странице есть кнопка refre sh, при нажатии на которую данные в БД обновляются.

Issue : - Когда пользователь нажимает кнопку подтверждения несколько раз, скажем, 5 раз, одни и те же данные вставляются 5 раз, что является огромной проблемой. и в случае нажатия кнопки refre sh при многократном нажатии появляется сообщение об ошибке: « значение дублированного ключа нарушает уникальное ограничение »

Итак, пожалуйста, предложите мне способ сделать кнопка не выполняется несколько раз для предотвращения дублирования и обработки любых угловых случаев.

Answer 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>

и когда пользователь нажимает кнопку refre sh, вы можете перезагрузить страницу, и Eventlistener будет установить снова.

Answer 2

Маэ sh, Пауло заработал действительно хорошие очки, но я бы хотел кое-что добавить.

1. Поскольку у вас уже есть onclick Функция для AJAX, вы можете установить эту кнопку на disabled=true после такого события. НО , помните, что это на стороне клиента, и на вашем месте я бы не доверял бы такому решению.
2. В комбинации с решением № 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.

Answer 3

Два простых шага:

• Реализация на клиенте javascipt onclick="this.disabled=true,this.form.submit();"

• Использование перенаправления HTTP для подтверждения или обработки логики c и отобразить сообщение об успехе;