jQuery | 序列化()与示例

在jQuery中，serialize() 方法用于将表单中的内容序列化为一个字符串。它将表单域中的名称和值（通过name属性定义）按照规定的格式编码为一个字符串。这个字符串可以用于Ajax操作或者在表单提交时使用。

使用方法

使用 serialize() 方法非常简单，只需要将表单对象作为参数传入即可。示例如下：

var formData = $('form').serialize();

示例

假设我们有一个表单，包含姓名、电子邮件和密码三个字段：

<form>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" />

    <label for="email">电子邮件：</label>
    <input type="email" name="email" id="email" />

    <label for="password">密码：</label>
    <input type="password" name="password" id="password" />

    <button type="submit">提交</button>
</form>

我们可以使用以下代码获取表单数据：

var formData = $('form').serialize();
console.log(formData);

输出结果如下：

name=John&email=john@example.com&password=12345

这个字符串就是序列化后的表单数据。我们可以将其作为参数传递给Ajax操作：

$.ajax({
    url: 'submit.php',
    type: 'post',
    data: formData,
    success: function(response) {
        console.log(response);
    }
});

在这个示例中，我们使用Ajax将表单数据提交到服务器端的submit.php文件。服务器端可以通过POST方式接收到这些数据，然后进行处理并返回响应内容。

总结

serialize()方法是一个非常方便的工具，它可以快速地将表单域中的名称和值序列化为一个字符串，方便我们进行Ajax操作或者表单提交。在使用 serialize()方法时，需要注意表单中输入项的name属性，它们将作为键值对的键名出现在序列化后的字符串中。