6.6 序列化元素

6.6 序列化元素

1．serialize()方法

做项目的过程中，表单是必不可少的，经常用来提供数据，例如注册、登录等。常规的方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用Ajax技术则能够异步地提交表单，并将服务器返回的数据显示在当前页面中。

前面在讲解$.get()和$.post()方法的时候，表单的HMTL代码如下：

[插图]

为了获取姓名和内容，必须将字段的值逐个添加到data参数中。代码如下：

[插图]

这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery 为这一常用的操作提供了一个简化的方法—serialize()。与jQuery中其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。通过使用serlialize()方法，可以把刚才的jQuery代码改为如下：

[插图]

当单击“提交”按钮后，也能达到同样的效果。如图6-11所示。

[插图]

图6-11 使用serialize()方法

需要注意的是，$.get()方法中data参数不仅可以使用映射方式，如以下jQuery代码：

[插图]

也可以使用字符串方式，如以下jQuery代码：

[插图]

用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，可以使用serialize()方法，它会自动编码。

因为serialize()方法作用于jQuery对象，所以不光只有表单能使用它，其他选择器选取的元素也都能使用它，如以下jQuery代码：

[插图]

把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

2．serializeArray()方法

在jQuery中还有一个与serialize()类似的方法—serializeArray()，该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。jQuery代码如下：

[插图]

通过console.log()方法输出fields对象，然后在Firebug中查看该对象，如图6-12所示。

[插图]

图6-12 用Firebug查看对象

既然是一个对象，那么就可以使用$.each()函数对数据进行迭代输出。代码如下：

[插图]

3．$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

比如将一个普通的对象序列化：

[插图]