form表单序列化详解(推荐)
更新时间:2017年08月15日 11:02:47 作者:Cynthia_xie
这篇文章主要介绍了form表单序列化操作,通过将表单中的键值序列化为可提交的字符串,并附上代码实例详细讲解了运行之后的结果,需要的朋友可以参考下
form的序列化,即将表单中的键值序列化为可提交的字符串
表单
<form id="target"> <select name="age"> <option value="age1">20</option> <option value="age2" selected>21</option> </select> <input name="name" value="Cynthia"> <label>passsword</label> <input type="password" name="password" value="123456"> <input type="hidden" name="salery" value="3333"> <textarea name="description" cols="15" rows="5">description</textarea> <input type="checkbox" name="hobby" value="football" checked> Football <input type="checkbox" name="hobby" value="basketball"> Basketball <input type="radio" name="sex" value="Female" checked> Female <input type="radio" name="sex" value="Male"> Male </form>
方法一
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));
结果:
方法二
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));
结果:
方法三
function serializeForm3(form){ if(!form||form.tagName.toUpperCase()!='FORM'){ return false; } var res=[]; var tag,tagType,tagVal,tagName; for(var i=0;i<form.length;i++){ tag=form[i]; tagType=form[i].type; tagVal=form[i].value; tagName=form[i].name; var reg1=/['textarea'|'text'|'passsword'|'label']/g; var reg2=/['radio'|'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<tag.options.length;j++){ if(tag.options[j].selected){ res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text)); } } }else{} } return res.join(" & "); } // 调用 var oForm = document.getElementById('target'); console.log(serializeForm3(oForm));
结果:
以上就是本文的全部内容啦,希望对大家有所帮助~
相关文章
Javascript & DHTML 实例编程(教程)(四)初级实例篇2—动画
Javascript & DHTML 实例编程(教程)(四)初级实例篇2—动画...2007-06-06JavaScript onkeydown事件入门实例(键盘某个按键被按下)
这篇文章主要介绍了JavaScript onkeydown事件入门实例,onkeydown事件捕捉键盘上某个按键被按下的情况,需要的朋友可以参考下2014-10-10JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
数据类型是编程语言的砖瓦,是所有你能想象到的复杂抽象的基础,在现代编程语言中,除了语言本身内置的一些简单数据类型外,基本上都提供了用于自定义数据类型的语言机制(在C中也可以利用结构体来实现),这些机制在一定程度上也决定了该语言的流行度和生命力2012-10-10Javascript实例教程(19) 使用HoTMetal(3)
Javascript实例教程(19) 使用HoTMetal(3)...2006-12-12转义字符(\)对JavaScript中JSON.parse的影响概述
JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象,本文为大家介绍下转义字符对JSON.parse方法的影响2013-07-07JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
通常而言,JavaScript由ECMAScript核心、BOM和DOM三部分构成,前面的文章将ECMAScript核心部分粗略的过了一篇2012-10-10
最新评论