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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
node内置调试方法总结
Feb 22 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
Vue打包后访问静态资源路径问题
Nov 08 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
解决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编写的导航条程序
2006/10/09 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python二元算术运算常用方法解析
2020/09/15 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
2014年大学团支部工作总结
2014/12/02 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server