原生JS表单序列化
// 表单序列化,IE9+
HTMLFormElement.prototype.serialize = function() {
var form = this;
// 表单数据
var arrFormData = [], objFormData = {}; [].slice.call(form.elements).forEach(function(ele) {
// 元素类型和状态
var type = ele.type, disabled = ele.disabled; // 元素的键值
var name = ele.name, value = encodeURIComponent(ele.value || 'on'); // name参数必须,元素非disabled态,一些类型忽略
if (!name || disabled || !type || (/^reset|submit|image$/i.test(type)) || (/^checkbox|radio$/i.test(type) && !ele.checked)) {
return;
} type = type.toLowerCase(); if (type !== 'select-multiple') {
if (objFormData[name]) {
objFormData[name].push(value);
} else {
objFormData[name] = [value];
}
} else {
[].slice.call(ele.querySelectorAll('option')).forEach(function(option) {
var optionValue = encodeURIComponent(option.value || 'on');
if (option.selected) {
if (objFormData[name]) {
objFormData[name].push(optionValue);
} else {
objFormData[name] = [optionValue];
}
}
});
}
}); for (var key in objFormData) {
arrFormData.push(key + '=' + objFormData[key].join());
} return arrFormData.join('&');
};
原生JS表单序列化的更多相关文章
- 原生js表单序列化----- FormData
<style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...
- js表单序列化时,非空判断
在项目中,对于数据的传输一般需要非空的判断,而数据字段较多时一般直接将表单序列化,此时如何判断非空,如下 因为将表单序列化时,数据格式为 trainKind=1&trainKindCode=1 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- Js 表单序列化
http://www.w3cmm.com/javascript/serialize-form.html
- [备忘]js表单序列化代码
function serialize(form) { var parts = [], elems = form.elements, i = 0, len = elems.length, filed = ...
- 原生JS实现表单序列化serialize()
有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- 表单序列化json字符串和js时间格式化
js时间格式化 new Date().format("时间格式") Date.prototype.format = function(fmt) { var o = { ...
随机推荐
- Windows下的SysWow64和System32
64位的Windows并不是简单地把所有东西都编译成64位就万事大吉的.关于64位的CPU应该做成什么样子,Intel和AMD曾有各自的打算.AMD的回答直接了当:新的64位处理器,应该能在提高更高处 ...
- SQL 注入、XSS 攻击、CSRF 攻击
SQL 注入.XSS 攻击.CSRF 攻击 SQL 注入 什么是 SQL 注入 SQL 注入,顾名思义就是通过注入 SQL 命令来进行攻击,更确切地说攻击者把 SQL 命令插入到 web 表单或请求参 ...
- 北京Uber优步司机奖励政策(1月22日
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 北京Uber优步司机奖励政策(12月23日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- protected修饰符详解
protected这个修饰符,各大参考书都会这样说:访问权限为类内,包内和子类,因此在父类中定义的方法和成员变量如果为protected修饰的,是可以在不同包中的子类进行访问的,示例代码如下: pac ...
- 【转】Oracle 如何找回已经删除了的表记录
有的时候我们不小心把数据库表(emp)中重要的记录给删除了,怎么给找回来了,看下面这个例子你就会明白. 某一天,10点钟的时候,张三一不小心给数据库表emp的一条重要记录给删除了并且还提交了,此时也没 ...
- Java连接redis集群操作存储、删除以及获取值
pom文件添加: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> &l ...
- 「日常训练」Girls and Boys(HDU-1068)
题意 有n个同学,给出同学之间的爱慕关系,选出一个集合使得集合中的人没有爱慕关系.问能选出的最大集合是多少. 分析 二分图的最大独立集. 最大独立集的意思是,在图中选出最多的点,使他们两两之间没有边, ...
- Linux命令应用大词典-第3章 文本编辑器
3.1 vi:文本编辑器 3.2 nano:编辑器 3.3 view:文办编辑器 3.4 ex:文本编辑器 3.5 ed:文本编辑器 3.6 red:文本编辑器 3.1 vi:文本编辑器 1.对文本创 ...
- Java基础知识:Java实现Map集合二级联动1
Java实现Map集合二级联动 Map集合可以保存键值映射关系,这非常适合本实例所需要的数据结构,所有省份信息可以保存为Map集合的键,而每个键可以保存对应的城市信息,本实例就是利用Map集合实现了省 ...