jQuery读取form表单中的input数组

经常用到jQuery的$.post方法提交数据，觉得非常好用，特别是提高用户体验的场景。

提交之前可以验证数据、修改数据，提交成功或者失败能够及时反馈到用户界面。

>>> 演示地址

有如下一个表单，

<form action="save.php" method="post">
    <input type="text" name="username[]" value="Jason" />
    <input type="text" name="username[]" value="Tom" />
    <input type="text" name="username[]" value="Goe" />

    <br />
    <label><input type="checkbox" name="book[]" value="Learn" />Lear</label>
    <label><input type="checkbox" name="book[]" checked="checked" value="PHP" />PHP</label>
    <label><input type="checkbox" name="book[]" value="Program" />Program</label>

    <br />
    <label><input type="radio" name="sex[]" checked="checked" value="Female" />Female</label>
    <label><input type="radio" name="sex[]" value="Male" />Male</label>
    <label><input type="radio" name="sex[]" value="Unknown" />Unknown</label>

    <br />
    <select name="order">
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third">third</option>
    </select>

    <p>&nbsp;</p>
    <button type="submit">提交</button>
</form>

save.php代码：

<?php
echo json_encode($_POST);

1 用serialize()方法提交

如果不用修改和验证数据，用$.post()提交最简单的方法是：

$('form').on('submit',function(e) {
    e.preventDefault();
    var data = $(this).serialize();

    $.post('save.php', data, function(result) {
        $('p').text(result);
    });
});

返回数据：

{"username":["Jason","Tom","Goe"],"book":["PHP"],"sex":["Female"],"order":"first"}

2 用map()和get()提取数据后提交

2外一种是需要处理数据的情况，这种需要先把数据处理后再提交。

<script>
    $('form').on('submit', function(e) {
        e.preventDefault();

        var username = $("input[name='username[]']").map(function () {
            return $(this).val();
        }).get();

        var book = $("input[name='book[]']:checked").map(function() {
            return $(this).val();
        }).get();

        var sex = $("input[name='sex[]']:checked").map(function() {
            return $(this).val();
        }).get();

        var order = $("select[name='order']").val();

        var data = {
            'username': username,
            'book': book,
            'sex': sex,
            'order': order
        };

        $.post('save.php', data, function(result) {
            $('p').text(result);
        });
     });
</script>

这一段返回和上面一样的数据，但是明显比第一种方式多了很多代码。

所以，如无必要，优先推荐第一种方式。