原生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 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
2014年情人节活动方案
2014/02/16 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
python中使用redis用法详解
2022/12/24 Redis