form表单序列化详解(推荐) 程序员文章站 2022-05-26 08:13:28 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)); 结果: 以上就是本文的全部内容啦,希望对大家有所帮助~ 上一篇: 微信小程序-滚动消息通知的实例代码 下一篇: jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例 推荐阅读 详解ASP.NET MVC Form表单验证 详解ASP.NET MVC Form表单验证 微信小程序 PHP后端form表单提交实例详解 jQuery序列化form表单数据为JSON对象的实现方法 javascript验证form表单数据的案例详解 详解AngularJS中的表单验证(推荐) jQuery-serialize()输出序列化form表单值的方法 Django form表单与请求的生命周期步骤详解 jquery form表单序列化为对象的示例代码 jquery表单插件form使用方法详解