// 表单序列化,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表单序列化的更多相关文章

  1. 原生js表单序列化----- FormData

    <style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...

  2. js表单序列化时,非空判断

    在项目中,对于数据的传输一般需要非空的判断,而数据字段较多时一般直接将表单序列化,此时如何判断非空,如下 因为将表单序列化时,数据格式为 trainKind=1&trainKindCode=1 ...

  3. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  4. Js 表单序列化

    http://www.w3cmm.com/javascript/serialize-form.html

  5. [备忘]js表单序列化代码

    function serialize(form) { var parts = [], elems = form.elements, i = 0, len = elems.length, filed = ...

  6. 原生JS实现表单序列化serialize()

    有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...

  7. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  8. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  9. 表单序列化json字符串和js时间格式化

    js时间格式化 new Date().format("时间格式") Date.prototype.format = function(fmt) { var o = {        ...

随机推荐

  1. OpenCV代码提取:dft函数的实现

    The Fourier Transform will decompose an image into its sinus and cosines components. In other words, ...

  2. andriod 学习三 使用android资源

    3.1 android框架中有许多资源,包括布局,字符串,位图,图片....,使用资源之前需要在相应的资源文件中定义资源,然后编译程序时ADT将定义的资源转换成java类并给予唯一的id,而代码中需要 ...

  3. hdu1051 Wooden Sticks(贪心+排序,逻辑)

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  4. JSP学习(JavaBean)

    Java Web学习 一.搭建java web开发环境: (1)安装jdk (2)安装Tomcat服务器(Apache的开源项目),安装Tomcat并设置环境变量 (3)安装EclipseEE(或者M ...

  5. WEB网站测试心得整理

    一.输入框: 1.正常的字母/文字/数字(正常流程的测试): 2.重复提交(输入内容后,重复点击提交按钮): 3.纯异常字符/正常输入夹杂异常字符(!@#¥%……&**等等): 4.长度限制( ...

  6. Jmeter接口测试(二)工具介绍

    一.Jmeter文件目录介绍 ◆ bin:可执行文件目录 Bin 目录文件 jmeter.bat:windows 的启动文件 jmeter.log:日志文件 jmeter.sh:linux 的启动文件 ...

  7. linux部署maven

    1.下载安装包 https://maven.apache.org/download.cgi 2.解压,并配置环境变量 vim /etc/profile export MAVEN_HOME=maven目 ...

  8. TW实习日记:第29-30天

    这两天挺忙,赶工期,改bug.项目现场的同事说客户火大得不行.可是谁叫你们谈工期谈的这么紧,完全不考虑开发的情况,真的是烦人这种事情.这两天遇到的最有难度的一个点就是附件预览,搞这个改到晚上11点. ...

  9. Java学习 · 初识 面向对象深入一

    面向对象深入 1.面向对象三大特征 a) 继承 inheritance 子类可以从父类继承属性和方法 子类可以提供自己的属性方法 b) 封装 encapsulation 对外隐藏某些属性和方法 对外公 ...

  10. 加密SecurityHelper

    接下来给大家分享一下我用的加密helper,现在只用的md5加密的方法,网上很多方法找到的时候加密完了会变成乱码,这样对于密码这种字段保存的时候就会出错.其实只需要把加密完的byte字节转化成16位就 ...