使用Ajax以特定顺序提交特定表单

Question

我完全意识到，类似于这个问题的问题以前也在这里发布过。虽然在之前的帖子中我找不到解决问题的方法。

我在一个包含其他几个表单的页面中有两个表单。当单击第二个表单的submit按钮时，我希望发生以下情况：

提交表单1，然后提交表单2。

但是当单击form1的submit按钮时，只会提交form1。

我的代码：

<form class='forms' id='form1'>
     <!--form content-->
     <button type='submit' id='submit-button-1'>Submit</button>
</form>

<form class='forms' id='form2'>
     <!--form content-->
     <button type='submit' id='submit-button-2'>Submit</button>
</form>

我知道有一种使用AJAX的方法可以做到这一点，但我几乎没有使用AJAX的经验。

Answer 1

请尝试以下操作：

​

$("#form2").on("submit", function() {
  var $self = $(this);
  var $form1 = $("#form1");
  $.ajax({
    url: yourPSubmitUrl,
    data: $form1.serialize(),
    type: 'POST',
    success: function(result) {
      $self.submit();
    }
 });
  return false;
});

​

Answer 2

当您正常提交表单时，响应将替换当前页面，因此您只能以这种方式提交一个表单。

要提交多个表单，您必须防止当前页面被替换，至少对于除最后一个表单之外的所有页面。

• 您可以在表单上设置target属性，以使响应转到其他位置，例如转到页面上的iframe中。
• 您可以使用AJAX发布表单，然后响应将返回到Javascript，而不是替换当前页面。

Answer 3

我会为两个表单定义公共的事件处理程序，但在内部检查正在提交的表单，以决定我们是否需要在第一个表单之后提交第二个表单。

在代码中，它将如下所示：

$('#form1, #form2').submit(function(e) {

    e.preventDefault();

    // In both cases Form 1 is submitted first
    var submition1 = submitForm.call($('#form1')[0]);

    if (this.id === 'form2') {
        submition1.then(function() {
            submitForm.call($('#form2')[0]);
        });
    }

});

function submitForm() {
    return $.post(this.action, $(this).serialize());
}

为了方便起见，我将实际的AJAX请求移到了单独的函数中。

这里的想法是在两种情况下都首先提交Form1。因此，如果原始提交来自Form2，我们简单地链接到返回的promise，以便在第一次提交完成后安排下一次提交。

演示： http://jsfiddle.net/ves2665v/