(编辑:jimmy 日期: 2024/11/18 浏览:2)
原生表单序列化
随着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') "=" + 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("&"); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。