form表单序列化详解推荐

form的序列化,即将表单中的键值序列化为可提交的字符串

表单

rush:xhtml;">
passsword Football Box" name="hobby" value="basketball"> Basketball Female dio" name="sex" value="Male"> Male

方法

rush:js;"> function serializeform1(form){ var setForm = ""; for(var key in form){ if(form.hasOwnProperty(key)){ setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+','; } } setForm = "{" + setForm.slice(0,setForm.length -1) + "}"; console.log(setForm); // console.log(JSON.parse(setForm)); return JSON.parse(setForm); }

// 调用
var oForm = document.getElementById('target');
console.log(serializeform3(oForm));

结果:

方法

rush:js;"> function serializeform2(form) { var parts = []; for (var i = 0,i1 = form.elements.length; i < i1; i++) { var field = form.elements[i]; switch (field.type) { case 'select-one': case 'select-multiple': if (field.type.length) { for (var j = 0,j1 = field.options.length; j < j1; j++) { var option = field.options[j]; if (option.selected) { var optionValue = ''; if (option.hasAttribute('value') && option.attributes['value'].specified) { //specified表明是否有此属性,有的话返回true,若定义了此属性但尚未添加到元素中也返回true。 optionValue = option.value; } else { optionValue = optionValue.text; } parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue)); } } } break; case undefined: case 'file': case 'submit': case 'reset': case 'button': break; case 'radio': case 'checkBox': if(!field.checked){ break; }else{ parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index'])); break; } default: if(field.name.length){ parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value)); } } } return parts.join('&'); }

// 调用
var oForm = document.getElementById('target');
console.log(serializeform2(oForm));

结果:

方法

rush:js;"> function serializeform3(form){ if(!form||form.tagName.toupperCase()!='FORM'){ return false; } var res=[]; var tag,tagType,tagVal,tagName; for(var i=0;idio'|'checkBox']/g; var reg3=/['select']/g; if(reg1.test(tagType)){ res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); }else if(reg2.test(tagType)&&tag.checked){ res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); }else if(reg3.test(tagType)){ for(var j=0;j// 调用
var oForm = document.getElementById('target');
console.log(serializeform3(oForm));

结果:

内容啦,希望对大家有所帮助~

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...