아약스 한 개의 제출 버튼으로 두 개의 양식 보내기

Question

한 페이지에 두 개의 양식이 있습니다 (하나의 서비스에서 하나씩 생성되므로 변경할 수 없습니다). 내가 form1을 무릎 꿇고 나서 Ajax와 함께 보낸다면, 두 번째 양식은 두 번째 양식을 보내고 첫 번째 양식을 보냅니다. 나는 이렇게하려고 애를 쓴다 :

$('#form1').submit(function(event) { 
      var this = (this); 
      event.preventDefault();   
      $.ajax({ 
       type:"POST", 
       url: "/wp-admin/admin-ajax.php", 
       data: $('#form2').serialize(), 
       success:function(data){ 
        this.unbind('submit').submit(); 
       }   
      }); 
     }); 

문제는 두 번째 이후에 첫 번째 양식을 보낼 수 없다는 것입니다. Ajax는 성공으로 끝나지 만 첫 번째 양식은 전송되지 않습니다. 당신의 성공 함수에서 this 키워드가 폼 요소를 참조되지 않기 때문에 도움

Answer 1

두 가지 : 당신이 this의 의미와 관련하여 인생을 더 쉽게 만들 수 있습니다 체인 .then(fn)을 할 수 있도록

• $.ajax()이, 약속을 반환합니다.
• form.submit()은 양식의 제출 핸들러를 다시 트리거하지 않으므로이를 바인드 해제 할 필요가 없습니다.

이 시도 :

$('#form1').on('submit', function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "/wp-admin/admin-ajax.php", 
     data: $('#form2').serialize() 
    }).then(this.submit.bind(this)); 
}); 

Answer 2

에 대한

덕분에 양식이 전송되지 않으며 밖으로 erroring되어 함께 그래서 함수를 호출합니다. 또한

this는

1. 아약스 컨텍스트를 통과하면 당신은 몇 가지 성공 함수의 실행 컨텍스트를 설정할 수 있습니다

   var this = (this); 
   //change to 
   var that = this; 
   

   변수로 사용할 수없는 예약어입니다 옵션

   jQuery.ajax({ 
       //... 
       context: jQuery("#form1"), 
       success:function(data){ 
        this.unbind("submit").submit(); 
       } 
   }) 
   

2. bind functi

   jQuery.ajax({ 
       //... 
       success: function(data){ 
        this.unbind("submit").submit(); 
       }.bind(jQuery("#form1")) 
   }); 
   

3. 에 편리하게 약속을 사용하는 this

   var that = this; 
   jQuery.ajax({ 
       //... 
       success:function(data){ 
        jQuery(that).unbind("submit").submit(); 
       } 
   }); 
   

Answer 3

당신이의 저장된 참조를 사용합니다.

function submitForm1() { 
return $.ajax({ 
       type:"POST", 
       url: "/wp-admin/admin-ajax.php", 
       data: $('#form1').serialize(),   
      }); 
}); 


function submitForm2() { 
return $.ajax({ 
       type:"POST", 
       url: "/wp-admin/admin-ajax.php", 
       data: $('#form2').serialize(),  
      }); 
}); 



submitForm2().done(function() { 
    submitForm1(); 
});