原生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 相关文章推荐
javascript 在firebug调试时用console.log的方法
May 10 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
如何开始收听短波广播
2021/03/01 无线电
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
会计电算化个人自我评价
2013/11/17 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
公司保密承诺书
2014/03/27 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
保研导师推荐信
2015/03/25 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
nginx设置资源请求目录的方式详解
2022/05/30 Servers