原生js实现form表单序列化
当我们有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)之后进行遍历
对要向后台发送的值都加name ;通过name判断过滤掉那些没用的值
然后判断类型(根据类型做相应的对象拼接)实现序列化对象;
代码如下:
app = {}; app.form = {}; app.form.serialize = function(form){var form = document.getElementById(form);var formArr = {}for(var i=0;i<form.elements.length;i++){var ele = form.elements[i];if (ele.name) {switch (ele.type){case 'radio':if(!formArr[ele.name]){formArr[ele.name] = form[ele.name].value}break;case 'checkbox':if(!ele.checked){break;}default:if(formArr[ele.name]){formArr[ele.name] = formArr[ele.name] + ',' + ele.value;}else{formArr[ele.name] = ele.value}}}}return formArr }
转载于:https://www.cnblogs.com/Tohold/p/10119443.html
原生js实现form表单序列化相关推荐
- 原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- 原生js实现form表单提交
最近工作比较忙,着急上线,写个简单的东西吧 url为你要提交的地址 params 为你提交的参数 function fromPost(URL, PARAMS) {var temp = document ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- JS阻止form表单提交失败
JS阻止form表单提交失败 问题简介 解决办法 问题简介 <form th:action="@{/user.do}" method="post" ons ...
- js 提交form表单,js更改form表单的action属性
2019独角兽企业重金招聘Python工程师标准>>> js 提交form表单 <s:form id="formID1" action="favo ...
- js实现Form表单submit提交截获数据(各浏览器通用)
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
- html得到上传文件类型后缀,js获取上传文件后缀名(附js提交form表单)
js获取上传文件后缀名(附js提交form表单) 代码如下: function check_file() { var strFileName=form1.FileName.value; if (str ...
- JS模拟Form表单提交
用java写了一个下载的功能,测试没有问题,但前台就是不弹出下载的提示框. 后来发现如果你的提交方式是ajax的方式的话是不会弹出提示框的,然后换成了form提交,顺利弹框通过,下来我们就用js模拟f ...
最新文章
- pandas 修改数据和数据类型
- vue 定义全局弹框_VUE路由拦截:Vue自定义全局弹窗组件
- JDBC访问数据库的基本程序
- 男程序员怎么保养皮肤【护肤】?
- Spine 2D animation for games
- ReactiveLodeBalancerClientFilter响应式负载均衡代理
- 万年5W充电头再见!2019新iPhone或将标配18W快充头
- 谷歌浏览器外贸版_做外贸没有单怎么办?找客户 供应商的小技巧-跨境电商
- java怎么释放分配的内存,linux 内存的分配和释放,linux分配释放
- JavaScript代理_ES6新增
- 系统操作手册_2020年辽宁高考志愿填报空表及系统操作手册!考生及家长请收好...
- [分享]RFID之我的M1离线卡爆破过程
- 第一篇 香橙派刷机和开发环境准备(Armbian版)
- 关于7Z自解压文件拆分,读取条目,复写,合并的功能
- js 分行显示已选爱好
- html实现圆形计时器特效,如何用css3实现圆形倒计时
- oracle linux7.9安装 Oracle Enterprise Manager Cloud Control13.5
- Linux帮助使用方法
- 通信光缆故障抢修4大基本原则!
- 分析:中国股市独步天下