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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
onpropertypchange
2006/07/01 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript