JQuery中serialize() 序列化

当我们需要将表单中的数据转换为可供AJAX或POST提交的字符串时，可以使用jQuery中的serialize()函数。serialize()函数将表单元素的值序列化(转换)后，返回一个字符串。

以下是"JQuery中serialize() 序列化"的完整攻略:

什么是序列化？

序列化是将对象的状态转换为可存储或可传输格式的过程。在浏览器环境中，我们可以使用 serialize()函数进行表单元素的序列化。

serialize()函数的基本语法

$(selector).serialize();

$(selector)是jQuery选择器，表示我们要序列化哪些表单元素。 如果我们要序列化整个表单，可以使用 $('form').serialize()，就可以序列化完整表单。

实际案例1

假设我们有一个表单，表单中包含了一组姓名和邮箱地址，我们需要将这组数据序列化。以下是HTML代码片段:

<form>
    <input type="text" name="name" value="Jack">
    <input type="text" name="email" value="[e-mail]">
    <input type="submit" value="Submit">
</form>

通过使用 serialize()函数，我们可以将表单中的数据序列化为字符串，如下所示：

$('form').serialize();

该函数会返回以下字符串：

name=Jack&email=jack%40gmail.com

如果我们直接用jQuery的 $.post() 函数进行AJAX提交，使用 serialize() 函数将会非常方便：

$('form').submit(function(event) {
    event.preventDefault(); //阻止表单默认行为
    var formData = $(this).serialize();
    $.post('submit.php', formData, function(response) {
        console.log(response);
    });
});

在上述代码中，我们使用 preventDefault() 方法来阻止表单默认提交（即刷新页面），将formData作为AJAX数据进行提交。

实际案例2

接下来，我们使用复选框进行一个实例，代码如下所示：

<form>
  <input type="text" name="name" value="Jack">
  <input type="checkbox" name="interests[]" value="music" checked> Music <br>
  <input type="checkbox" name="interests[]" value="reading" checked> Reading <br>
  <input type="submit" value="Submit">
</form>

在上述代码中，我们和之前的表单不同之处在于，添加了一个多选框，name属性设置为interests[]，这样能将多选框的所有被选中项的值都提交到后台。

$('form').submit(function(event) {
    event.preventDefault(); //阻止表单默认行为
    var formData = $(this).serialize();
    $.post('submit.php', formData, function(response) {
        console.log(response);
    });
});

上述代码中，我们依然使用 $('form').serialize() 将表单数据序列化，但是我们需要注意一点：多选框的值应该被序列化成一个数组。

输出如下：

name=Jack&interests%5b%5d=music&interests%5b%5d=reading

总的来说，serialize()函数是我们在表单提交时非常实用的一个函数。它可以将表单中的所有数据直接进行字符串拼接，方便我们后续提交操作。