jQuery 对话框 - 通过 ajax 提交表单？答案

【问题标题】：jQuery dialog - submit form via ajax?jQuery 对话框 - 通过 ajax 提交表单？
【发布时间】：2012-03-07 20:19:21
【问题描述】：

我在 jQuery 对话框中显示了一个带有大量验证的大型表单，但我现在想知道是否有办法获取它，以便在我提交实际表单后，它将通过 Ajax 加载并停留在我打开的模态窗口？不知道有没有办法这样做。

谢谢！

【问题讨论】：

标签： jquery ajax forms dialog

【解决方案1】：

是的，您必须劫持提交按钮以执行 ajax GET 将所有表单字段传递给它，然后返回 false；

【讨论】：

按钮只处理了一部分...如果用户点击“输入”怎么办？

【解决方案2】：

您必须查看这个精彩的jquery form plugin 以获取ajaxifying 您的表格。它的美妙之处在于，如果您在输入的pattern 属性中放置了验证（我更喜欢这样做，而不是为每个输入字段编写javascript sn-ps），则只有在每个验证通过时才会提交表单。简而言之，提交事件的默认行为将发生变化，您将拥有 REQUEST 的精确副本，只不过这次是在 ajax 中。

【讨论】：

如果可能，我想避免扩展，但老实说，这看起来很棒，很诱人，但这意味着可能需要重新进行验证，嗯！

【解决方案3】：

$('.mySubmitButton').bind('click', function(e) {
   //do something else
   return false; //stops form from submitting the normal way.
});

或

   $('form#IDofForm').submit(function() {
      //do something upon submit
   });

如果你愿意，也可以两者结合

【讨论】：

【解决方案4】：

这是一个失败的简单方法，它只会在提交成功时替换表单元素本身。我正在使用 on() 方法，因此代码可以在 ajax 中加载表单之前在页面加载时运行

$(document).on('submit', '#formID',function() {
    var $form = $(this);
    var dataToServer = $form.serialize();
    $.post(urlString, dataToServer, function(dataFromServer) {
        /* run ajax sucess code here */

        $form.replaceWith(dataFromServer);


    });
    return false; /* avoid browser submitting form*/

});

编辑：您如何集成它也取决于您的验证方法

【讨论】：

谢谢，我现在就调查一下