原生js实现form表单序列化的方法


Posted in Javascript onAugust 02, 2018

当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼;我们一起用原生来写一个表单序列化方法:

先介绍一下jquery中有相应的表单序列化的方法:

1.serialize()方法

格式:var data = $("form").serialize();

功能:将表单内容序列化成一个字符串。

这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

2.serializeArray()方法

格式:var jsonData = $("form").serializeArray();

功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name;

下面我们用原声js来实现我们的form表单序列化的函数;

首先我们列明步骤:

1)先获取form表单使用ById或者是forms;

2)获取后通过elements 取到表单中所有元素的数组;

3)之后进行遍历判断类型(根据类型做相应的对象拼接)实现序列化对象;

代码如下:

function formser(form){
 var form=document.getElementById(form);
 var arr={};
 for (var i = 0; i < form.elements.length; i++) {
 var feled=form.elements[i];
 switch(feled.type) {
 case undefined:
 case 'button':
 case 'file':
 case 'reset':
 case 'submit':
 break;
 case 'checkbox':
 case 'radio':
 if (!feled.checked) {
 break;
 }
 default:
 if (arr[feled.name]) {
 arr[feled.name]=arr[feled.name]+','+feled.value;
 }else{
 arr[feled.name]=feled.value;
 
 } 
 }
 }
 return arr
 },

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

Javascript 相关文章推荐
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
自荐信结尾
2013/10/27 职场文书
事业单位接收函
2014/01/10 职场文书
争先创优心得体会
2014/09/12 职场文书
Python WSGI 规范简介
2021/04/11 Python
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
python基础之文件操作
2021/10/24 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript