jQuery에서 이중 양식 제출을 방지하는 방법: 어떤 기술이 가장 효과적입니까?

jQuery에서 이중 양식 제출을 방지하는 방법

처리하는 데 상당한 시간이 걸리는 양식을 작업할 때 사용자의 실수로 인한 실수를 방지합니다. 양식을 여러 번 제출하는 것이 중요합니다. 이 문서에서는 jQuery를 사용하여 이를 달성하는 방법에 대해 설명합니다.

초기 시도

초기 접근 방식에서는 양식 제출 시 모든 입력과 버튼을 비활성화하는 것이 포함되었습니다. 그러나 이 기술로 인해 Firefox에서는 양식이 제출되지 않았습니다.

향상된 솔루션

해결책은 제출 버튼만 선택적으로 비활성화하는 것입니다. 모든 입력을 비활성화할 수 있기 때문입니다. 양식 제출을 방해합니다. 다음 jQuery 코드는 이를 수행합니다.

$('button[type=submit], input[type=submit]').prop('disabled', true);

대체 플러그인 접근 방식

또 다른 옵션은 jQuery의 data() 함수를 활용하여 표시하는 아래 jQuery 플러그인을 사용하는 것입니다. 양식을 제출된 상태로 유지하여 후속 제출을 방지합니다.

jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit', function(e) {
    var $form = $(this);

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

  return this;
};

사용:

$('form').preventDoubleSubmission();

AJAX 양식 제외

응용 프로그램에 다음과 같은 AJAX 양식이 있는 경우 여러 제출을 허용해야 하는 경우 아래와 같이 클래스를 추가하여 제출을 제외할 수 있습니다.

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

위 내용은 jQuery에서 이중 양식 제출을 방지하는 방법: 어떤 기술이 가장 효과적입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!