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. C#函数式编程之标准高阶函数

    何为高阶函数 大家可能对这个名词并不熟悉,但是这个名词所表达的事物却是我们经常使用到的.只要我们的函数的参数能够接收函数,或者函数能够返回函数,当然动态生成的也包括在内.那么我们就将这类函数叫做高阶函 ...

  2. HTML5服务器端推送事件 解决PHP微信墙推送问题

    问题描述 以前的文章中<PHP微信墙制作,开源>已经用PHP搭建了一个微信墙获取信息的服务器,然后我就在想推送技术应该怎么解决,上一篇已经用了.NET 的signalr做了一个微信墙,PH ...

  3. Android开发学习总结(六)—— APK反编译

    学习和开发Android应用有一段时间了,今天写一篇博客总结一下Android的apk文件反编译.我们知道,Android应用开发完成之后,我们最终都会将应用打包成一个apk文件,然后让用户通过手机或 ...

  4. ubuntu 12.04 支持中文----完胜版

    原文地址 http://pobeta.com/ubuntu-sublime.html, /* sublime-imfix.c Use LD_PRELOAD to interpose some func ...

  5. thrift之TTransport层的堵塞的套接字I/O传输类TSocket

    本节将介绍第一个实现具体传输功能的类TSocket,这个类是基于TCP socket实现TTransport的接口.下面具体介绍这个类的相关函数功能实现. 1.构造函数 分析一个类的功能首先看它的定义 ...

  6. 如何在ASP.NET中用C#将XML转换成JSON

    本文旨在介绍如果通过C#将获取到的XML文档转换成对应的JSON格式字符串,然后将其输出到页面前端,以供JavaScript代码解析使用.或许你可以直接利用JavaScript代码通过Ajax的方式来 ...

  7. Spring MVC + MyBatis整合(IntelliJ IDEA环境下)

    一些重要的知识: mybais-spring.jar及其提供的API: SqlSessionFactoryBean: SqlSessionFactory是由SqlSessionFactoryBuild ...

  8. 分析system_call中断处理过程

    分析system_call中断处理过程 上周我们使用gcc内嵌汇编调用系统调用,这次我们具体分析下过程. 将getpid嵌入menuos 代码从github下载,步骤如下: 1. 增加一个函数,get ...

  9. MVC5为WebAPI添加命名空间的支持

    前言 默认情况下,微软提供的MVC框架模板中,WebAPI路由是不支持Namespace参数的.这导致一些比较大型的项目,无法把WebApi分离到单独的类库中. 本文将提供解决该问题的方案. 微软官方 ...

  10. Unity中的协程是什么?

    什么是协程? 1.协程是一个分部执行,遇到条件(yield return 语句)会挂起,直到条件满足才会被唤醒继续执行后面的代码. 2.Unity在每一帧(Frame)都会去处理对象上的协程.Unit ...