jQuery AJAX 폼이 두 번 제출됨

jQuery AJAX 폼이 두 번 제출됨

jQuery를 통해 캡처하고 AJAX를 통해 전송하는 폼이 있습니다.문제는 페이지를 새로 고칠 때마다 양식이 여러 번 제출된다는 것입니다.

제출 버튼의 바인드를 해제하려고 했는데, 첫 번째 제출 후에 정상적으로 양식이 게시됩니다.어떤 도움이라도 주시면 감사하겠습니다.

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});

전화하는 것뿐만 아니라preventDefault, 도 호출합니다.stopImmediatePropagation이벤트에서.

$('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

대부분의 경우, 이 기능을 사용하고 있을 수 있습니다.button또는submitAjax 이벤트를 트리거합니다.이것을 시험해 보세요.

$('#exportForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });

jQuery Validation 등 어떤 종류의 검증을 사용하는 경우 폼은 두 번 제출됩니다.그 이유는 다음과 같습니다.$('#exportForm').submit사용자가 직접 작성하면 확인 플러그인은 모든 필드를 성공적으로 검증한 후 양식을 제출합니다.

NB : jQuery Validation을 사용하는 경우 사용하지 마십시오..submit()대신 을 사용합니다.

간단하게 사용할 수 있습니다.e.stopImmediatePropagation();:

예를 들어 다음과 같습니다.

$('#exportForm').submit(function(e){
    e.stopImmediatePropagation();

Chris Sercombe가 지적한 바와 같이 e.stopimediatePropagation()은 동작하며 확실히 문제를 해결하지만 사용할 필요는 없습니다.당신의 코드 어딘가에 문제가 아직 존재합니다.2개의 투고 요구를 송신하는 방법의 예를 나타냅니다.

AngularJS 를 사용하고 있는 경우, 「HandleAjaxController」라고 하는 컨트롤러를 작성했다고 하면, 이 ng-Controller 를 div 에 할당하고, 이 ng-Controller 를 inner div 에 할당할 수 있습니다.이것에 의해, 투고 요구가 2 회 송신됩니다.그래서:

    <div ng-controller='HandleAjaxController'>
        <div ng-controller='HandleAjaxController'>
            <button id="home" type="button" class="btn btn-success">Send data</button>

NG 루트에서 컨트롤러를 여기에 설정했기 때문에 이 때문에 한 번 큰 스트레스를 받았습니다.

    $routeProvider
    .when("/", {
        templateUrl : "src/js/partials/home.html",
        controller : "HandleAjaxController"
    })

집에 다시 세팅했어요.html:<div ng-controller='HandleAjaxController'>

어쨌든, 그것은 2개의 투고가 송신되는 방법의 한 예입니다.

다른 js 코드를 확인해야 합니다.아마도 두 번 "송신" 이벤트를 트리거할 수 있습니다.내 경우 버튼 하나에 대한 클릭 핸들러에서 "return false"를 잊어버렸다.

여기 https://stackoverflow.com/a/15041642/4412545에서 답변한 바와 같이 jquery.displusional-min.disples ref를 두 번 추가했습니다.

거의 같은 문제를 안고 있는 사람에게는 jQuery 이벤트를 function(){}에서 제어해야 한다고 말할 수 있습니다.따라서 ajax POST로부터의 요구를 1개만 받는 것이 최선입니다.

$(document).ready(function {
 $("#exportForm").click(function{
   $.ajax({
      type: "POST",
      url: "#", //your url
      data: data, //your variable
      success: function(){
        //do something here
      }
   });
 });
});

다음과 같이 두 번째 함수를 호출하는 함수가 아닙니다.

$(document).ready(function {
 exportingForm();

 function exportingForm(){
   $("#exportForm").click(function{
     $.ajax({
        type: "POST",
        url: "#", //your url
        data: data, //your variable
        success: function(){
          //do something here
        }
     });
   });
 }
});

같은 클래스에 여러 요소가 있는 경우에도 이 문제가 발생할 수 있습니다.

<button class="downvote">
  <img src="/img/thumbs-down.png" class="downvote">
</button>

이 문제는 php 폼의 버튼 대신 div를 사용하여 해결할 수 있습니다.Ajax를 사용하기 때문에 버튼이 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/20195483/jquery-ajax-form-submits-twice