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. SQL Server优化技巧之SQL Server中的"MapReduce"

    日常的OLTP环境中,有时会涉及到一些统计方面的SQL语句,这些语句可能消耗巨大,进而影响整体运行环境,这里我为大家介绍如何利用SQL Server中的”类MapReduce”方式,在特定的统计情形中 ...

  2. 配置ubuntu 16.04.1 LTS odoo 10.0开发环境

    使用VMware Fusion 8.5.0创建ubuntu 64bit虚拟机:使用ubuntu-16.04.1-desktop-amd64.iso镜像缺省安装ubuntu,用户名odoo,密码1234 ...

  3. javascript跨域通信(二):window.name实现的跨域数据传输

    首先了解一下window.name这个东西是什么. name 在浏览器环境中是一个全局/window对象的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变 并且name 属性仅对 ...

  4. ichat在线客服jQuery插件(可能是历史上最灵活的)

    ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ...

  5. 使用Swift代码演示Cocoa框架

    通过使用简单的代码学习Cocoa框架,每一个例子都通过代码和StoryBoard实现,并且总结他们的各自特点 所有完整代码将会托管到github库,https://github.com/land-pa ...

  6. paip.java swt 乱码问题解决

    paip.java swt 乱码问题解决 看累挂,Dfile.encoding是gbk的.. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专 ...

  7. Prototype in JavaScript

    声明 本文旨在入门,简单了解下何为prototype & __proto__ 原型对象 我们创建每个函数都有个prototype(原型)属性,该属性是一个指针,指向一个对象,而这对象的用途是包 ...

  8. Entity Framework Code First迁移基本面拾遗

    项目中用到了EF Code First和迁移,但发现有些方面似懂非懂.比如:如何在迁移文件中控制迁移过程?如果在迁移文件中执行SQL语句?如何使用Update-Database的其它参数?数据库在生产 ...

  9. Android——程序移植 相关知识总结贴

    android 移植笔记有感 http://www.apkbus.com/android-11842-1-1.html   Android振动器系统结构和移植和调试 http://www.apkbus ...

  10. PS脚本获取网络适配器状态

    1. Get-WmiObject -Class Win32_NetworkAdapterConfiguration ` -filter "IPEnabled = $true" 2. ...