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

Question

我完全清楚以前曾在此处发布过与此类似的问题。不过，我在之前的帖子中找不到解决问题的方法。

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

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

但是当点击form1的提交按钮时，只提交了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/