在 jQuery 中通过 AJAX 提交表单答案

【问题标题】：Submit form via AJAX in jQuery在 jQuery 中通过 AJAX 提交表单
【发布时间】：2012-03-22 09:36:29
【问题描述】：

我正在使用以下 jQuery 代码通过 AJAX 提交表单。

jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted')
                      },
            error   : function( xhr, err ) {
                        alert(''Error);     
                      }
        });    
        return false;
    });

代码在没有 ajax 的情况下完美运行。 但如果我通过 ajax 加载表单则不起作用。我认为这是因为在 JavaScript 加载后通过 ajax 加载表单。

有什么办法吗？

【问题讨论】：

嗯...去了解它是如何工作的？不，真的，如果您首先使用 AjaxForm 类将事件绑定到所有表单，然后使用该类加载另一个表单（没有绑定提交事件），它将不起作用（这真的很奇怪 :-)）
@SergeS：抱歉，我不能对 cmets 框中的笑话进行投票。

标签： javascript jquery ajax forms

【解决方案1】：

如果使用 jQuery 1.7+，您可以尝试使用 .on() 来委托事件并绑定到具有相同类的所有未来表单。尝试找到最近的不是动态插入的父代，而不是 $(document)。

$(document).on('submit', 'form.AjaxForm', function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                         alert('Submitted');
            },
            error   : function( xhr, err ) {
                         alert('Error');     
            }
        });    
        return false;
    });

【讨论】：

【解决方案2】：

您不能将处理程序直接附加到不存在的 html

有两种处理方式。

在 ajax 的成功回调中绑定处理程序。

    $(formParentSelector).load(formFileUrl, function() {
        /* within this success callback the new html exists and can run code*/
        AjaxForm();
    });

function    AjaxForm(){
    jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })
 }

另一种方法是将处理程序委托给文档中的更高级别，以便将来匹配元素可用

 jQuery(document).on('submit','form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })

【讨论】：