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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
HTTP状态码详解
2021/03/18 杂记
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
行政助理岗位职责
2013/11/10 职场文书
趣味运动会口号
2015/12/24 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书