jQuery序列化元素（学习笔记）

内容：摘自《锋利的jQuery》第一版 第六章

---

1、serialize()方法

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

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

<form id="form1" action="#">
    
<p>评论：</p>

<p>姓名：<input type="text" name="username" id="username" /></p>

<p>内容：<textarea name="content" id="content" rows="2" cols="20" ></textarea></p>

<p><input type="text" id="send" value="提交" /></p>

</form>

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

$(function(){
    //点击提交按钮，将表单数据提交到服务器 并 接收响应的数据    
    $("#send").click(function(){
        $.get("get1.php",{
                //获取页面元素
                username: $("#username").val(),
                content: $("#content").val()
            },
            function(data, textStatus){
                //将返回的数据添加到页面上
                $("#resText").html(data);
            }
        );
    });
});

这种方式在只有少量字段的表单中，勉强还可以使用，如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性。

jQuery为这一常用的操作提供了一个简化的方法  ---  serialize()。与jQuery中的其他方法一样，serialize()方法也是作用于一个

jQuery对象，它能够将DOM元素序列号为字符串，用于Ajax请求。通过使用serialize()方法可以把刚才的jQuery代码改为如下：

$(function(){
    //点击提交按钮，将表单数据提交到服务器 并 接收响应的数据    
    $("#send").click(function(){
        $.get("get1.php",
            $("#form1").serialize(),
            function(data, textStatus){
                //将返回的数据添加到页面上
                $("#resText").html(data);
            }
        );
    });
});

当点击 “提交” 按钮后，也能达到同样的效果，如下图所示：

 

即使在表单中再添加字段，脚本仍然能够使用，并且不需要做其他多余的工作。

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

{
    username: $("#username").val(),   
    content: $("#content").val()
}

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

"username=" + encodeURIComponent($("#username").val()) +  
"&content=" + encodeURIComponent($("#content").val())

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

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

$(":checkbox,:radio").serialize();

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

 

2、serializeArray()方法

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

var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);// 用 Firebug 输出

通过console.log()方法输出fields对象，然后再Firebug中查看该对象，如下图所示的userObjects对象：

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

$(function(){
    var fields = $(":checkbox,:radio").serializeArray();
    console.log(fields);// 用 Firebug 输出
    $.each( fields , function( i , field ){
        $("#results").append(field.value + " , ");
    });
});

 

3、$.param()方法

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

var obj = { a: 1 , b: 2 , c: 3 };
var k = $.param(obj);
alert(k);// 输出 a=1&b=2&c=3