jQuery ajax serialize() 方法使用示例攻略

什么是 serialize() 方法

serialize() 方法是 jQuery 中的一种序列化表单数据的方法，可以将表单内容序列化为 URL 编码字符串，用于 AJAX 提交表单数据或者拼接 GET 请求 URL 参数等场景。

serialize() 方法语法

$(selector).serialize();

其中 selector 是需要序列化的表单选择器或者表单元素，如 form 元素、fieldset 元素或者 input、textarea、select 等表单控件的选择器。

使用示例

示例一：获取表单所有数据

<!DOCTYPE html>
<html>
<head>
    <title>jQuery serialize() 方法示例</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1">
        <input type="text" name="username" value="test">
        <input type="password" name="password" value="123456">
        <textarea name="content">Hello, World</textarea>
        <input type="checkbox" name="remember" value="1" checked="checked">
        <select name="gender">
            <option value="male" selected="selected">男</option>
            <option value="female">女</option>
        </select>
        <button type="button" onclick="serializeForm()">提交</button>
    </form>
    <script type="text/javascript">
        function serializeForm() {
            var formData = $('#form1').serialize();
            console.log(formData);
        }
    </script>
</body>
</html>

上面的代码示例中，我们创建了一个表单，包含了文本输入框、密码输入框、文本域、多选框、下拉框等表单控件，以及一个提交按钮。当用户点击提交按钮时，我们通过 serialize() 方法获取表单所有数据，然后在控制台输出查看。

示例二：提交 AJAX 请求

<!DOCTYPE html>
<html>
<head>
    <title>jQuery serialize() 方法示例</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="form2">
        <input type="text" name="username" value="test">
        <input type="password" name="password" value="123456">
        <button type="button" onclick="submitForm()">提交</button>
    </form>
    <script type="text/javascript">
        function submitForm() {
            var formData = $('#form2').serialize();
            $.ajax({
                url: '/api/login',
                type: 'POST',
                data: formData,
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }
    </script>
</body>
</html>

上面的代码示例中，我们创建了一个登录表单，包含了用户名输入框、密码输入框以及提交按钮。当用户点击提交按钮时，我们通过 serialize() 方法获取表单数据，然后使用 $.ajax() 方法提交 AJAX 请求，请求成功后弹出成功信息，请求失败则打印错误信息。

总结

serialize() 方法是 jQuery 中序列化表单数据的常用方法，可以将多个表单控件的数据序列化为一段字符串，方便进行 AJAX 数据提交或者拼接 URL 参数等操作。在使用 serialize() 方法的过程中，需要注意表单选择器或者元素的选择方式，以及获取数据后需要进一步进行处理的方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery ajax serialize() 方法使用示例 - Python技术站

jQuery ajax serialize() 方法使用示例