原生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中offsetleft属性的用法
Nov 11 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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获得当前的脚本网址
2007/12/10 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python基于time模块求程序运行时间的方法
2017/09/18 Python
详解supervisor使用教程
2017/11/21 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python dict乱码如何解决
2020/06/07 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
中英文自我评价常用句型
2013/12/19 职场文书
高二政治教学反思
2014/02/01 职场文书
五一劳动节活动记录
2014/03/23 职场文书
英文请假条
2014/04/11 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书