JQuery AJax序列化元素

最新推荐文章于 2021-08-05 18:19:55 发布

ld__________

最新推荐文章于 2021-08-05 18:19:55 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： jquery AJax serialize

本文链接：https://blog.youkuaiyun.com/ld_____/article/details/49889613

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了jQuery中序列化表单数据的方法，包括serialize(), serializeArray() 和 $.param() 的使用方式及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery中，当我们使用ajax时，常常需要拼装input数据以键值对（Key / Value）的形式发送到服务器，用JQuery的serialize方法可以轻松的完成这个工作，使用这个方法可以将表单序列化为键值对（key1=value1&key2=value2…）后提交。

W3School方法介绍 serialize()方法

1、serialize()方法

该方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的JQuery对象。可以选择一个或多个表单元素（如input或者文本框），或者form元素本身。序列化的值可在生成AJax请求时用于URL查询字符串中。

$(selector).serialize()

说明如下：

该方法创建以标准URL编码表示的文本字符串，它的操作对象是代表表单元素集合的JQuery对象；

对于其他选择器选取的元素也可以使用它。

// 把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化
$(':checkbox, :radio').serialize()

另外，form里面的name不能使用JS JQuery中的关键字。如果name="length"将不能正确获得值
2、serializeArray()方法

该方法不是返回字符串，而是将dom元素序列化后，返回JSON格式的数据

<div>
    <input type="radio" name="test" value="A">
    <input type="radio" name="test" value="B">
    <input type="radio" name="test" value="C">
    <input type="radio" name="test" value="D">
    <input type="radio" name="test" value="E">
</div>

JS 代码

var fields = $(':radio').serializeArray();
console.log(fields);

3、$.param()方法

它是serialize()方法的核心，用来对一个数组或者对象按照key / value进行序列化

var obj = {a:1, b:2, c:3};
var k = $.param(obj);
console.log(k);
// 输出结果为    "a=1&b=2&c=3"