在 jQuery 中通过 AJAX 提交表单

Posted 2023-05-09

【中文标题】在 jQuery 中通过 AJAX 提交表单

【英文标题】：Submit form via AJAX in jQuery

【发布时间】：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：抱歉，我不能对 cme​​ts 框中的笑话进行投票。

【参考方案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');     
                      
        );    

                                             )