// 表单序列化,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. 成员变量:对象vs指针

    一旦类初始化,那么对象必然会被创建,指针则可以在需要时候再去初始化所指向.

  2. RSA加密通信小结(二)-新版本APP与后台通信交互内容修改方案

    注1:本次修改分为两步,首先是内容相关的修改,待其完成之后,再进行加密通信项(粗体字备注)修改. 1.新的提交后台的格式包括:data,token(预留字段,暂时后台不校验),userId(已有的不删 ...

  3. Qt 独立运行时伴随CMD命令窗口

    用Qt写了一个小软件,在把程序release后,打包分装后,发现程序运行的时候会伴随cmd命令窗口,可把我愁怀了 不过功夫不负有心人,在老师和我网友的帮助下,终于搞完了 CONFIG:指定工程配置和编 ...

  4. 在Android上运用Anko和Kotlin开发数据库:SQLite从来不是一件轻松的事(KAD25)

    作者:Antonio Leiva 时间:Mar 30, 2017 原文链接:https://antonioleiva.com/databases-anko-kotlin/ 事实告诉我们:在Androi ...

  5. Objective-C NSString基本使用 类方法 self关键字

    NSString基本使用 #import <Foundation/Foundation.h> int main() { //最简单的创建字符串的方式 NSString *str = @&q ...

  6. flex布局笔记

    flex布局: 容器: 容器主轴方向: 项目的主轴对齐方式: space-between:两端对齐,项目之间的间隔都相等. space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目 ...

  7. 375. Clone Binary Tree【LintCode java】

    Description For the given binary tree, return a deep copy of it. Example Given a binary tree: 1 / \ ...

  8. 在几份docx文档中里查找某个值

    import docx, os def readDocx(fileName): doc = docx.Document(fileName) content = '\n'.join([para.text ...

  9. 百度翻译api 实现简易微信翻译小程序

    介绍 口袋翻译 口袋翻译 微信小程序 翻译功能 含7类语言的相互翻译 包含最近10条的翻译历史回溯功能 微信搜索:简e翻译 功能展示   使用百度翻译api需要申请 appid 与 key 并在 ap ...

  10. [C++ map & dp]codeforces 960F. Pathwalks

    题目传送门:960F 思路: 题目给人的感觉很像最长上升子序列,自然而然想到用dp的思路去处理 题目中给的限制条件是,要接上前面的边,前面的边权一定要小于当前的边权(题目按照输入的顺序,因此只找前面的 ...