jquery input name 有无[] 区别及心得

　　我主做后端，对于前端的知识很是欠缺，很多时候要用到的时候才去百度一下，但是当时的问题解决的并没有掌握具体的用法及原理，所以我前端的知识这么久以来掌握的还是很片面。

 

　　这次遇到一个问题就是 form 表单动态添加，提交表单之后获取数据希望是多维数组，不然最后的同名input name 值会把之前的给覆盖掉，因为对前端的知识不了解，问题描述也不是很清晰，绕了一点弯路。

不过好歹是查询到了自己想要的资料。。。接下来我做一下记录

 

1 input数组

如下一个表单：

<input type="text" name="username[]" value="Jason" />
<input type="text" name="username[]" value="Tom" /> <input type="text" name="username[]" value="Goe" />

我们在name属性值后面加一个中括号[]，后台获取数据的时候，就能拿到一个数组：$_POST['username'] = ['Jason', 'Tom', 'Goe']。

 

2 非input数组

另一种容易混淆的提交方式，就是name后面没有中括号[]：

<input type="text" name="username" value="Jason" />
<input type="text" name="username" value="Tom" /> <input type="text" name="username" value="Goe" />

这种情况提交后，后台拿不到一个数组，而是最后那个标签的值，也就是$_POST['username'] = 'Goe'。

 

这个是我开始犯得的错误，这样最后的值会覆盖之前的重名name input 值。

 

3 非input数组方式提交成数组

上面两种提交方式中，直接点提交按钮提交，和用jQuery$('form').seriaze()序列化提交，得到的结果都是一样的。

加[]后台得到数组，不加[]得到最后标签的值。

如果第二种也要提交成数组，那怎么办呢？

办法就是，在提交之前用jQuery处理：

$('form').on('submit',function(e) { e.preventDefault(); var data = $("input[name='username']").map(function () { return $(this).val(); }).get(); $.post('save.php', {username: data}, function(r){ $('p').html(r); }); });


我是参照这个方法解决自己的问题的。

 

转载于:https://www.cnblogs.com/shiyongzhe/p/9876154.html