原生表单序列化
成都创新互联公司专业为企业提供巴州网站建设、巴州做网站、巴州网站设计、巴州网站制作等企业网站建设、网页设计与制作、巴州企业网站模板建站服务,十年巴州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化
在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。
在进行表单序列化之前,需要弄清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。
实现表单序列化的函数为:
function serialize(form){ var parts=[], field=null, i, len, j, optLen, option, optValue; for (i = 0; i < form.elements.length; i++) { field=form.elements[i]; switch (field.type) { case 'select-one': case 'select-multiple': if(field.name.length){ for (var j = 0; j < field.options.length; j++) { option=field.options[j]; if (option.selected) { optValue=""; if (option.hasAttribute) { optValue=(option.hasAttribute('value') ? option.value : option.text); }else{ optValue=(option.attribute['value'].specified ? option.value : option.text); } parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); } } } break; case undefined: //字段集 case "file": //文本输入 case "submit": //提交按钮 case "reset": //重置按钮 case "button": //自定义按钮 break; case "radio": //单选按钮 case "checkbox": //复选框 if (!field.checked) { break; } //执行默认操作 default: //不包含没有名字的表单字段 if(field.name.length){ parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } } return parts.join("&"); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
售后响应及时
7×24小时客服热线数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款