表单中input name属性有无[]的区别

本文转自http://www.awaimai.com/2076.html

最近在看headfirst PHP&MySQL，第215页中的第一行代码有点看不懂，在网上找到这篇文章，顿时解惑。

Form提交有个小技巧，应用中灵活使用可以起到事半功倍的效果。

这个技巧就是input数组提交。

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']。

改用GET方式再提交，可以看到数据格式是这样的：

username%5B%5D=Jason&username%5B%5D=Tom&username%5B%5D=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'。
GET方式提交看到数据格式如下：

username=Jason&username=Tom&username=Goe

这种方式三个username后面没有带[]。

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);
    });
});

这种方式稍显啰嗦。

如果不需要提交之前不需处理数据，直接用第一种方式最为方便。