纯js实现的serialize函数，序列化表单数据

最新推荐文章于 2025-05-13 17:52:14 发布

sinprog

最新推荐文章于 2025-05-13 17:52:14 发布

阅读量8.9k

点赞数

分类专栏： web前端文章标签： js serialize 表单序列化

本文链接：https://blog.youkuaiyun.com/sinprog/article/details/42384193

版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript编写一个类似于jQuery的serialize函数，实现表单数据的序列化。适用于移动端性能考虑，代码可能略显冗余，欢迎交流。

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

jquery的serialize用起来很爽吧，可惜jquery用在移动端的话效率很低，因为项目原因需要用到此函数，所以自己写了一个，代码有些冗余请见谅

			function nodeEach(list){ //将NodeList转换为Array
				var arr = new Array();
				for( var i = 0 ; list.length > i ; i++ ){
					var node = list[i]; 
					arr.push(node);
				}
				return arr;
			}
			
			function in_array(search,array){
			    for(var i in array){
			        if(array[i]==search){
			            return true;
			        }
			    }
			    return false;
			}
			
			function getJsonObjLength(jsonObj) {
				var Length = 0;
				for (var item in jsonObj) {
					Length++;
				}
				return Length;
			}
		
			function serialize(id){
				var formDom = document.getElementById(id);
				var valueList = [];//保存待处理的值，结构为： name , value 
				var data = {};//返回结果的json数组
				
				var type1List = new Array();
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='color']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='date']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='datetime']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='datetime-local']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='email']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='hidden']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='month']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='number']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='password']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='range']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='search']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='tel']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='text']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='time']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='url']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='week']") ) );
				type1List = type1List.concat( nodeEach( formDom.querySelectorAll("input[type='radio']:checked") ) );
				for( var i = 0 ; type1List.length > i ; i++ ){
					var dom = type1List[i];
					var name = dom.getAttribute("name");//键名
					var value = dom.value;//值
					valueList.push( { name: name, value: value} );
					
				}
				
				var type3List = formDom.querySelectorAll("input[type='checkbox']:checked");
				var existCheckbox = new Array();
				for( var i = 0 ; type3List.length > i ; i++ ){
					if( in_array( type3List[i].getAttribute("name"), existCheckbox ) )//判断是否已处理
						continue;
					
					var dom = type3List[i];
					
					var name = dom.getAttribute("name");//键名
					var value = dom.value;//值
					
					var cache = { name: name, value: [] };
					
					var l = formDom.querySelectorAll("input[type='checkbox'][name='"+name+"']:checked");
					for( var j = 0 ; l.length > j ; j++ ){
						cache.value.push( l[j].value );
					}
					valueList.push( cache );
					
				}
				
				var type4List = formDom.querySelectorAll("select");
				for( var i = 0 ; type4List.length > i ; i++ ){
					var name = type4List[i].getAttribute("name");//键名
					var value = type4List[i].options[type4List[i].options.selectedIndex].getAttribute("value"); //值
					valueList.push( { name: name, value: value} );
					
				}
				
				for( var i = 0 ; valueList.length > i ; i++ ){
					var row = valueList[i];
					var name = row.name;
					if( !name ){
						continue;
					}
					var value = row.value?row.value:null;
					var kArr = name.split("[");//是否是数组
					
					var cDatas = "data";
					for( var j = 0; j < kArr.length; j++ ){
						var cn = kArr[j].replace(/\]/g, "").trim();//去除右方括号
						if(cn){
							
							if( !isNaN(cn) ){
								cDatas += "[" + cn + "]";
							}else{
								cDatas += "." + cn;
							}
							if( eval(cDatas+" == null") ) {
								eval( cDatas + "= {};" );
							}
							
						}else{//追加
							cDatas += "["+ eval( "getJsonObjLength("+cDatas + ")" )+"]";
							eval( cDatas + " = {};" );
						}
					}
					
					eval( cDatas + " = value;" );
					
				}
				return data;
			}

作者：sinprog

技术在于交流、沟通，转载请注明出处并保持作品的完整性。