随着 Ajax 的出现, 表单序列化已经成为一种常见需求. 在 JavaScript 中, 可 以利用表单字段的 type 属性, 连同 name 和 value 属性一起实现对表单的序列化. 在编写代码之前, 有必须先搞清楚在表单提交期间, 浏览器是怎样将数据发送给服务器的.
?
1. 对表单字段的名称和值进行 URL 编码, 使用和号 (&) 分隔.
2. 不发送禁用的表单字段.
3. 只发送勾选的复选框和单选按钮.
4. 不发送 type 为 "reset" 和 "button" 的按钮.
5. 多选选择框中的每个选中的值单独一个条目.
6. 在单击提交按钮提交表单的情况下, 也会发送提交按钮; 否则, 不发送提交按钮.
7. <select > 元素的值, 就是选中的 < option > 元素的 value 特性的值. 如果 < option > 元素没有 value 特性, 则是 < option > 元素的文本值.
在表单序列化过程中, 一般不包含任何按钮字段, 因为结果字符串很可能是通过其他方式提交的. 除此之外的其他上述规则都应该遵循.
基本的表单序列化可以通过遍历表单元素实现, 实例代码如下:
- function serialize(form){
- var params = [];
- var eles = form.elements;
- for (var i = 0;i<ele.length;i++){
- let field = ele[i];
- switch(field.type){
- 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("&");
- }
思考: vue react 的相关框架, iview , antd 的 Form 组件是如何实现的序列化?
未完待续...
关注我 一起回忆 《JavaScript 高级程序设计》《JavaScript 设计模式中》你没注意过的细节
来源: http://www.bubuko.com/infodetail-3683924.html