jQuery serialize()的用法（附带实例）

实际项目应用中经常需要使用表单，例如注册表单、登录表单、评论表单等来提供数据。提交表单的常规方法是将表单内容提交到指定页面，在这个过程中整个浏览器都会被刷新。而使用 AJAX 技术能够实现异步提交表单。

在使用全局函数 $.get() 和 $.post() 向服务器传递参数时，其中的参数是通过逐个搜索输入字段的方式进行传输的，例如：

$.post("index.php", {
    username: $("#username").val(),
    content: $("#content").val()
}, function(data, textStatus) {
    // 省略部分代码
});

如果表单的输入字段过多，那么使用这种方式传递参数就比较麻烦。

为了解决这个问题，jQuery 引入 serialize() 方法。与其他方法一样，serialize() 方法也作用于一个 jQuery 对象，它可以将 DOM 元素内容序列化为字符串，用于 AJAX 请求。

【实例】使用 serialize() 方法序列化表单。
1) 创建 index.html 页面，构建表单，在此处给表单中的控件添加 name 属性，并给表单赋予一个 id 属性值。主要代码如下：

<form id="testForm" action="">
    用户名：<input type="text" name="username" /><br /><br />
    性别：<input type="text" name="sex" /><br /><br />
    年龄：<input type="text" name="age" /><br /><br />
    邮箱：<input type="text" name="email" /><br /><br />
    地址：<input type="text" name="address" /><br /><br />
    内容：<textarea id="content" name="content"></textarea><br /><br />
    <input type="button" id="button" name="button" value="提交" /><br /><br />
    <div id="responseText"></div>
</form>

2) 引入 jQuery 库，并且在引入代码下方编写 jQuery 代码，使用 $.post() 方法提交表单、传值。具体代码如下：

$(document).ready(function() {
    $("#button").on("click", function() {
        $.post(
            "index.php",
            $("#testForm").serialize(), // 序列化表单
            function(data) {
                var html = "";
                html += "用户名：" + data.username + "<br/>";
                html += "性别：" + data.sex + "<br/>";
                html += "年龄：" + data.age + "<br/>";
                html += "邮箱：" + data.email + "<br/>";
                html += "地址：" + data.address + "<br/>";
                html += "内容：" + data.content + "<br/>";
                $("#responseText").html(html); // 显示用户提交的留言信息
            },
            "json"
        );
    });
});

在页面中填入信息，单击“提交”按钮，运行效果如下图所示：

图 1 使用serialize()方法序列化表单

由此可以看出，使用 serialize() 方法序列化表单非常便捷，不用手动书写传递参数。其中给 <form> 元素加上 id 属性值是为了便于获取表单对象，进而调用该对象的 serialize() 方法。

jQuery serialize()的用法（附带实例）

相关文章