原生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实现给指定元素的后面追加内容
Apr 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
详解基于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中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
基于Django的ModelForm组件(详解)
2017/12/07 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
公务员年度考核评语
2014/12/31 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
用python画城市轮播地图
2021/05/28 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python