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