發送兩個表單與阿賈克斯一個提交按鈕

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以成功結束，但第一種形式不會發送。

感謝您的幫助

Answer 1

兩件事情：

• $.ajax()返回一個承諾，所以你可以鏈.then(fn)，它可以使生活方面的this意義更容易。
• 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

您的形式不會發送，因爲你的成功功能this關鍵字不會引用您的表單元素等你的函數調用它的示數出來。

而且this是保留字，你不能把它作爲一個變量

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

您可以設置成功函數的執行上下文幾種方法

1. 傳遞上下文中的AJAX選項

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

2. 使用綁定函數在

   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(); 
});