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. log_reuse_wait_desc为REPLICATION,日志暴大,无法收缩

    早上检查数据发现,有一台数据的硬盘空间只剩下几MB.习惯性检查日志文件,发现日志文件居然暴增到了350多GB 首先备份日志,再收缩-------无变化.(实际上日志备份每1小时1挡,正常在跑.) -- ...

  2. Android 5.x特性概览一

    2014年,Google 携 Android 5.X 重装回归.迄今为止已有已有两年有余,全新设计的 UI风格和更加强悍的性能,再一次奠定了Android 的霸主地位.本文将就 UI 方面 Googl ...

  3. 尝试在Mac上编译DNX

    自从XRE改名为DNX至今,从来没有在Mac OS X上成功编译过DNX.一直很纳闷,难道DNX的开发人员不用Mac?今天突然明白了,DNX的开发人员真的不用Mac.而且DNX用的2个持续集成服务Ap ...

  4. quartznet笔记

    http://sourceforge.net/projects/quartznet/files/quartznet/

  5. 深入理解javascript 中的 delete(转)

    在这篇文章中作者从<JavaScript面向对象编程指南>一书中关于 delete 的错误讲起,详细讲述了关于 delete 操作的实现, 局限以及在不同浏览器和插件(这里指 firebu ...

  6. 02-Vue入门之数据绑定

    2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标 ...

  7. [ACM_模拟] ZOJ 3713 [In 7-bit 特殊输出规则 7bits 16进制]

    Very often, especially in programming contests, we treat a sequence of non-whitespace characters as ...

  8. 最新最全的js判断移动设备及操作系统

    var navigator = window.navigator, userAgent = navigator.userAgent, android = userAgent.match(/(Andro ...

  9. AngularJS快速入门指南07:Http对象

    $http是AngularJS提供的一个服务,用来从远程服务器读取数据. 提供数据 下面的数据由Web服务器提供: { "records": [ { "Name" ...

  10. ubuntu下firefox无法看bilibili解决方案

    突然发现,在ubuntu中使用firefox打开bilibili网站无法加载视频与弹幕,在网上搜到的可能的问题为:linux下的firefox使用的flash player是老版本,bilibili不 ...