主页/jQuery教程/jQuery Ajax/jQuery Ajax 表单序列化

jQuery教程

jQuery Ajax 表单序列化

4,308字
18–27 分钟

概览

目录

在处理表单提交时，将用户输入的数据转换为适合 Ajax 请求的格式是一个关键步骤。jQuery Ajax 表单序列化 提供了两个核心方法：.serialize() 和 .serializeArray()。这两个方法能够自动从表单元素中提取数据，并将其格式化为便于传输和处理的格式。.serialize() 生成标准的 URL 编码查询字符串，适用于 GET 请求或作为 application/x-www-form-urlencoded 的 POST 数据。.serializeArray() 则生成包含字段名和值的 JavaScript 对象数组，为构建复杂数据结构或手动处理数据提供了更大的灵活性。

.serialize()：生成 URL 编码查询字符串

.serialize() 方法作用于一个 jQuery 对象，该对象包含一组表单元素。它会遍历这些元素，生成一个标准的、URL 编码的查询字符串。

语法

$( "form" ).serialize()

该方法不接受任何参数。它返回一个字符串，格式为 field1=value1&field2=value2&field3=value3，其中所有的特殊字符都会被正确转义。此字符串可以直接用作 $.ajax() 的 data 选项，或附加在 GET 请求的 URL 后。

示例：使用 .serialize() 提交登录表单

以下示例展示了如何利用 .serialize() 在表单提交时捕获数据，并通过 POST 请求发送给服务器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.serialize() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="loginForm">
        <div>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" name="password" id="password">
        </div>
        <button type="submit">登录</button>
    </form>
    <div id="response"></div>

    <script>
        $('#loginForm').on('submit', function(event) {
            event.preventDefault();

            var formData = $(this).serialize(); // 生成类似 "username=abc&password=123" 的字符串
            console.log('序列化数据:', formData);

            $.post('/api/login', formData, function(response) {
                $('#response').text('登录结果：' + response.message);
            }).fail(function() {
                $('#response').text('请求失败。');
            });
        });
    </script>
</body>
</html>

在这个例子中，无论表单包含多少字段，.serialize() 都会自动收集所有具有 name 属性的输入元素，生成一个格式正确的查询字符串。这避免了手动拼接数据的繁琐过程，是 jQuery Ajax 表单序列化 中最常用的方法。

.serializeArray()：生成对象数组

与 .serialize() 返回字符串不同，.serializeArray() 方法返回一个由 JavaScript 对象组成的数组。每个对象包含两个属性：name（对应表单元素的 name 属性）和 value（对应表单元素的当前值）。

语法

$( "form" ).serializeArray()

该方法返回一个数组，结构如下：

[
  { name: "username", value: "用户输入值" },
  { name: "password", value: "用户输入值" }
]

这种数据结构非常适合用于进一步的数据处理，例如与 $.each() 结合进行遍历，或将其转换为 JSON 对象。

示例：使用 .serializeArray() 处理复杂表单

以下示例展示了如何使用 .serializeArray() 获取表单数据，并将其转换为 JSON 对象以发送到服务器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.serializeArray() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="profileForm">
        <div>
            <label>姓名：<input type="text" name="fullName" id="fullName"></label>
        </div>
        <div>
            <label>邮箱：<input type="email" name="email" id="email"></label>
        </div>
        <div>
            <label>兴趣：</label>
            <label><input type="checkbox" name="interests" value="coding"> 编程</label>
            <label><input type="checkbox" name="interests" value="reading"> 阅读</label>
            <label><input type="checkbox" name="interests" value="music"> 音乐</label>
        </div>
        <button type="submit">保存</button>
    </form>
    <div id="output"></div>

    <script>
        $('#profileForm').on('submit', function(event) {
            event.preventDefault();

            var fieldArray = $(this).serializeArray();
            console.log('序列化数组:', fieldArray);

            // 将数组转换为更易用的 JSON 对象
            var jsonData = {};
            $.each(fieldArray, function(index, field) {
                // 处理同名字段（如多个复选框）的情况
                if (jsonData[field.name]) {
                    if (!Array.isArray(jsonData[field.name])) {
                        jsonData[field.name] = [jsonData[field.name]];
                    }
                    jsonData[field.name].push(field.value);
                } else {
                    jsonData[field.name] = field.value;
                }
            });

            $('#output').html('<pre>将发送的 JSON：' + JSON.stringify(jsonData, null, 2) + '</pre>');

            // 实际发送时，可能需要设置 contentType: 'application/json'
            // 并使用 JSON.stringify(jsonData) 作为数据
        });
    </script>
</body>
</html>

此示例演示了 .serializeArray() 的核心价值：它提供了对表单数据的编程访问能力。通过遍历返回的数组，可以处理复选框组等复杂输入，构建出自定义的 JSON 结构。这对于需要与期望 JSON 格式数据的 RESTful API 交互的场景尤为重要，是 jQuery Ajax 表单序列化 中更具灵活性的选择。

序列化方法对比

为了更清晰地理解两者差异，下表总结了 .serialize() 和 .serializeArray() 的主要区别。

特性.serialize().serializeArray()
返回类型字符串Array
数据格式URL 编码的查询字符串包含 name 和 value 属性的对象数组
直接用途可直接用于 $.ajax() 的 data 选项（默认 application/x-www-form-urlencoded）需要进一步处理（如转换为 JSON、遍历）
处理同名字段自动合并，格式为 name=value1&name=value2每个同名元素在数组中独立存在
适用场景简单表单提交，与服务器端传统表单处理兼容复杂数据处理，与期望 JSON 格式的现代 API 交互
转义处理自动对特殊字符进行 URL 编码不进行编码，保留原始值

版本变更记录

版本变更内容
1.0引入 .serialize() 方法。
1.2引入 .serializeArray() 方法，以提供更灵活的数据访问方式。
1.4增强了对 <input type="image"> 等特殊元素的支持。
3.0内部实现与选择器引擎的更新保持同步，但方法签名和行为保持不变。

浏览器兼容性

serialize() 和 serializeArray() 方法的兼容性与 jQuery 核心的 DOM 操作功能一致。它们依赖于标准的 DOM 元素属性，因此能够在所有支持 jQuery 的浏览器中正常工作。以下为 jQuery 核心所支持的最低浏览器版本。

浏览器最低支持版本
Chrome30+
Edge12+
Firefox25+
Opera18+
Safari7+
Chrome Android30+
Firefox for Android25+
Opera Android18+
Safari on iOS7+
Samsung Internet4.0+
WebView Android4.4+
WebView on iOS7+

注：对于非常古老的浏览器（如 IE6-8），jQuery 1.x 系列提供了兼容性支持。在这些浏览器中，序列化方法同样有效，但需要注意表单元素的 name 属性是必需的，且某些输入类型（如 email）可能不会被识别，但仍会作为普通文本字段被序列化。

jQuery Ajax 表单序列化 通过 .serialize() 和 .serializeArray() 两个简洁的 API，完美地弥合了 HTML 表单与异步数据请求之间的鸿沟。无论是快速实现一个传统的表单提交，还是为现代化的 JSON API 构建复杂的数据负载，这两个方法都提供了坚实且灵活的基础。它们是简化 jQuery Ajax 开发流程、提升代码质量与可维护性的重要工具。

最新发布