原生JS实现表单序列化serialize()

最新推荐文章于 2025-06-15 17:12:31 发布

邵天宇Soy

最新推荐文章于 2025-06-15 17:12:31 发布

阅读量1.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： javascript 浏览器工具 html

本文链接：https://blog.youkuaiyun.com/qq_35087256/article/details/81253559

本文详细介绍了如何使用原生JavaScript实现表单序列化功能，代码中包含清晰的注释，确保每个步骤易懂。在处理过程中，特别关注了URL、字段名称以及中文的编码，采用了encodeURIComponent()函数，确保数据的正确传递。之前的文章曾对比过encodeURI和encodeURIComponent的区别。此方法可以将HTML表单数据转换为'a=1&b=2&c=3&d=4&e=5'这样的字符串格式。

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

使用原生的js模拟了表单序列化，代码中对表单处理尽可能地进行文字说明
其中对于url，字段名称，中文进行了使用了encodeURIComponent()进行编码。

之前博客有介绍encodeURI和encodeURIComponent的区别

Object.prototype.serialize = function(){
   
   
	var res = [],	//存放结果的数组
		current = null,	//当前循环内的表单控件
		i,	//表单NodeList的索引
		len, //表单NodeList的长度
		k,	//select遍历索引
		optionLen,	//select遍历索引
		option, //select循环体内option
		optionValue,	//select的value
		form = this;	//用form变量拿到当前的表单，易于辨识
	
	for(i=0, len=form.elements.length; i<l