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

你必须使用诺言才能方便。

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

Answer 2

您的表单无法发送，因为您的成功函数中的this关键字不会引用您的表单元素，因此您的函数调用错误输出。

同样this是保留字，不能将其用作变量

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

您可以通过几种方式设置成功函数的执行上下文

传递ajax选项中的上下文

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

使用绑定功能

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

使用已保存的this

参考

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

Answer 3

两件事：

$.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));
});

使用ajax一个提交按钮发送两个表单

3 个答案: