如何让jQuery serialize仅作用于单个表单并避免提交重复数据？

这个问题的根源很明确：你用$('.login_form').serialize()的时候，会选中页面上所有带有login_form类的表单，所以两个表单的字段都会被序列化——哪怕用户只填了其中一个，另一个的空字段也会被带进去，导致后端收到重复的键值对。

最简单的修复方式是只序列化当前点击按钮所在的那个表单，而不是全局选中所有同类别表单。具体修改如下：

修改后的代码 #

$('.login-button').click(function(e){ 
    e.preventDefault(); 
    // 关键改动：只序列化当前按钮所在的表单
    var submit_val= $(this).closest('.login_form').serialize(); 
    var step = $(this).parent().find('.step').val(); 
    dest = "https://"+domain+"/login/login.php"; 
    $.ajax({ 
        type:"POST", 
        url: dest, 
        data: submit_val, 
        dataType: 'json', 
        success:function(data){ 
            //actions on success... 
        } 
    }); 
}); 

为什么这样有效？ #

$(this).closest('.login_form')会从当前点击的按钮元素开始，向上遍历DOM树，找到最近的带有login_form类的表单元素——也就是用户正在提交的那个表单。这样序列化出来的就只有这个表单里的字段，完全不会涉及另一个表单的内容，自然就不会有重复数据了。

相比用$(this).parent('form')，closest()更可靠，哪怕你的按钮外面嵌套了其他容器元素（比如div），它依然能准确找到所属的表单。

测试一下，现在当用户点击某个步骤的"Accedi"按钮时，序列化结果只会包含该表单的username_login、password_login和对应的step值，不会出现重复的空字段了。

内容的提问来源于stack exchange，提问作者user2399035