Javascript表单序列化原理及实现代码详解


Posted in Javascript onOctober 30, 2020

随着 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("&");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
详解Vue方法与事件
Mar 09 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 #Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
Vue自定义表单内容检查rules实例
Oct 30 #Javascript
探索node之事件循环的实现
Oct 30 #Javascript
使用TS来编写express服务器的方法步骤
Oct 29 #Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 #Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python 线程池用法简单示例
2019/10/02 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
本科毕业生自我鉴定
2013/11/02 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
爱护公共设施标语
2014/06/24 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
健康状况证明模板
2014/10/23 职场文书
品质保证书格式
2015/02/28 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis