function serialize(form) {
var parts = [],
elems = form.elements,
i = ,
len = elems.length,
filed = null;
for (; i < len; i++) {
filed = elems[i];
switch (filed.type) {
case "select-one":
case "select-multiple":
if (filed.name.length) {
var j = ,
opt,
optLen = filed.options.length;
for (; j < optLen; j++) {
opt = filed.options[j];
if (opt.selected) {
parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(opt.value));
}
}
}
break;
case undefined:
case "submit":
case "reset":
case "file":
case "button":
break;
case "radio":
case "checkbox":
if (!filed.checked) {
break;
}
default:
if (filed.name.length && filed.value) {
parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(filed.value));
}
}
}
return parts.join("&");
}

这个方法重点用了HTML5中的FormData ,还有es6中for of循环。

  function serialize(form) {
var formData = new FormData(form),
getValue = formData.entries(),
parts = [];
for (var pair of getValue) {
parts.push(pair[] + "=" + pair[]);
}
return parts.join("&");
}

js实现表单序列化的两种方法。的更多相关文章

  1. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. ace+validate表单验证(两种方法)

    //修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...

  4. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  5. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  6. oracle多表关联删除的两种方法

    oracle多表关联删除的两种方法 第一种使用exists方法 delete from tableA where exits ( select 1 from tableB Where tableA.i ...

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

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

  8. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  9. jsp——js事件修改属性样式的两种方法(直接赋值、修改属性)、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

随机推荐

  1. 利用Junit4进行程序模块的测试,回归测试

    ①在你的工程里导入JUnit4的包 ②右击创建JUnit测试类,在测试类中编写测试代码即可. JUnit 目前需要掌握的有一下几点: Fixture系列:BeforeClass,AfterClass, ...

  2. [ucgui] 对话框8——Framewin小工具

    >_<" 这里主要是窗口小工具Framewin的用法介绍,包括创建背景窗口及其消息回调函数,创建Frame窗口并设置其回调函数,这里一些其他的功能被我注释掉了,有向状态栏添加最大 ...

  3. [游戏模版9] Win32 半透明 图像处理

    >_<:Previous part we talk about how to map a transparent picture, and this time we will solve ...

  4. JsRender for object 语法说明

    JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...

  5. clearing & settlement

    http://blog.donews.com/tianshun/archive/2013/07/ http://wenku.baidu.com/view/e5a736e3e53a580217fcfe1 ...

  6. Hibernate各种主键生成器策略与配置详解(转载)

    http://www.cnblogs.com/kakafra/archive/2012/09/16/2687569.html 1.assigned 主键由外部程序负责生成,在 save() 之前必须指 ...

  7. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 浅谈压缩感知(二十七):压缩感知重构算法之稀疏度自适应匹配追踪(SAMP)

    主要内容: SAMP的算法流程 SAMP的MATLAB实现 一维信号的实验与结果 稀疏度K与重构成功概率关系的实验与结果 一.SAMP的算法流程 前面所述大部分OMP及其前改算法都需要已知信号的稀疏度 ...

  9. iOS----友盟分享完善版本

    分享 详细集成 注意:1.线上集成文档的示例代码对应的是最新版本的SDK,如果你所用的SDK版本类名或者方法名与此文档不符合,请看随包里面的线下文档或者下载使用最新版本的SDK. 设置友盟appkey ...

  10. Python核心编程笔记(类)

    Python并不强求你以面向对象的方式编程(与Java不同) # coding=utf8 class FooClass(object): version = 0.1 def __init__(self ...