原生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 = { ...
随机推荐
- geoserver中WMS服务详细说明
官方geoserver中WMS服务中几种操作的API的详细说明地址: http://docs.geoserver.org/stable/en/user/services/wms/reference.h ...
- 北京Uber优步司机奖励政策(9月21日~9月27日)
用户组:优步北京人民优步A组(适用于9月21日-9月27日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不 ...
- 青岛Uber司机奖励政策(8月31号~9月6号)
本周的奖励规则如下,请各位司机朋友按照自己的情况查询. 人民优步(People’s Uber) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版 ...
- LeetCode: 31. Next Permutation (Medium)
1. 原题链接 https://leetcode.com/problems/next-permutation/description/ 2. 题目要求 给出一个整型数组,让我们给出下一个排序情况.注意 ...
- Python破解压缩包密码问题
所用知识 1. Pool 进程池 2. try...except 异常处理 3.枚举的方式 4.生成器的运用 逻辑关系 通过生成假密码去碰撞!捕获异常,一直碰撞,直到生成的密码与压缩包建立的密码对应, ...
- Redis系列九 Redis集群
1. redis-cluster架构图 redis-cluster投票:容错 架构细节 ①所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. ②节点的fai ...
- JDK1.8改为JDK1.7过程
电脑之前eclipse版本要求JDK1.8版本,现在要用jboss7.1做性能测试,目前仅支持JDK7.故需要降级. 网上有很多说把1.8删掉,这种做法我是不建议的,那么要用的时候呢?又得装回来多蛋疼 ...
- Qt-QML-Slider-滑块-Style
感觉滑块这个东西,可以算是一个基本模块了,在我的项目中也有这个模块,今天我将学一下一下滑块的使用以及美化工作. 想学习滑块,那就要先建立一个滑块,新建工程什么的这里就省略了,不会的可以看我前面的几篇文 ...
- 【转】巫师3:狂猎(The Witcher 3: Wild Hunt )的游戏事件工作流
转自腾讯游戏开发者平台(GAD) CDPROJEKT RED的主程序.Piotr Tomsinski 在GDC2016的最后一天18号,CDPROJEKT RED的主程Piotr Tomsinski, ...
- Attention注意力机制介绍
什么是Attention机制 Attention机制通俗的讲就是把注意力集中放在重要的点上,而忽略其他不重要的因素.其中重要程度的判断取决于应用场景,拿个现实生活中的例子,比如1000个人眼中有100 ...