JavaScript表单序列化的方法详解
本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧。
在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单的序列。
首先,我们来了解下在表单提交期间,浏览器是怎样将数据发送给服务器的。
对表单字段的名称和值进行URL编码,使用和号(&)分割。
不发送禁用的表单字段。
只发送勾选的复选框和单选按钮。
不发送type为“reset”和“button”的按钮。
多选择框中的每个选中的值单独一个条目。
在单击提交按钮提交表单的情况下,也会发送提交按钮;
否则,不发送提交按钮。也包括type为“image”的<input>元素。
<select>元素的值,就是选中的<option>元素的value特性的值。如果<option>元素没有value特性,则是<option>元素的文本值。
在表单序列化过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其它方式提交的。
除此之外的其它上述规则都应该遵循。
实现表单序列化的代码:
function serialize(form) {
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue; for (i = 0, len = form.elements.length; i < len; i++) {
field = form.elements[i]; switch (field.type) {
case "select-one":
case "select-multiple": if (field.name.length) {
for (j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if (option.selected) {
optValue = "";
if (option.hasAttribute) {
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break; case undefined:
//字段集
case "file":
//文件输入
case "submit":
//提交按钮
case "reset":
//重置按钮
case "button":
//自定义按钮
break; case "radio":
//单选按钮
case "checkbox":
//复选框
if (!field.checked) {
break;
}
/* 执行默认曹旭哦 */ default:
//不包含没有名字的表单字段
if (field.name.length) {
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
} var btn = document.getElementById("serialize-btn");
EventUtil.addHandler(btn, "click", function (event) {
var form = document.forms[0];
alert(serialize(form));
});
面这个serialize()函数首先定义了一个名为parts的数组,用于保存将要创建的字符串的各个部分。
然后,通过for循环迭代每个表单字段,并将其保存在field变量中。在获得了一个字段的引用之后,使用switch语句检测其type属性。序列化过程最麻烦的就是<select>元素,它可能是单选框也可能是多选框,值可能有一个选中项,而多选框则可能有零或多个选中项。这里的代码适用于这两种选择框,至于可选框的数量是由浏览器控制的。在找到了一个选中项之后,需要确定使用什么值。如果不存在value特性,或者虽然存在该特性,但值为空字符串,都要使用选项的文本代替。为检查这个特性,在DOM兼容的浏览器中需要使用hasAttribute()方法,而在IE中需要使用特性的specified属性。
如果表单中包含<fieldset>元素,则该元素会出现在元素集合中,但没有type属性。因此,如果type属性未定义,则不需要对其进行序列化。同样,对于各种按钮以及文件输入字段也是如此。对于单选按钮和复选框,要检查其checked属性是否被设置为false,如果是则退出switch语句。如果checked属性为ture,则继续执行default语句,即将当前字段的名称和值进行编码,然后添加到parts数组中。函数的最后一步,就是使用join()格式化整个字符串,也就是用和号来分割每一个表单字段。
最后,serialize()函数会以查询字符串的格式输出序列化之后的字符串。
JavaScript表单序列化的方法详解的更多相关文章
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- input表单的type属性详解,不同type不同属性之间区别
目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
- JavaScript之call()和apply()方法详解
简介:apply()和call()都是属于Function.prototype的一个方法属性,它是JavaScript引擎内在实现的方法,因为属于Function.prototype,所以每个Func ...
- Html,Css,Javascript及其他的注释方法详解
一.HTML的注释方法<!-- html注释:START -->内容<!-- html注释:END --> 包含在“<!--”与“-->”之间的内容将会被浏览器忽略 ...
- javascript中set与get方法详解
其中get与set的使用方法: 1.get与set是方法,因为是方法,所以可以进行判断. 2.get是得到 一般是要返回的 set 是设置 不用返回 3.如果调用对象内部的属性约定的命名方式是_a ...
- JavaScript原生对象属性和方法详解——Array对象
http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...
- a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
- JavaScript中继承的实现方法--详解
最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...
随机推荐
- Java 获取Enumeration类型的集合
学习到java的io流中关于序列流SequenceInputStream使用,其中把3个以上的流串联起来操作, 使用的参数是生成运行时类型为 InputStream 对象的 Enumeration 型 ...
- Spark和Hadoop MapReduce之间的比较
关于两者的讨论文章: https://www.zhihu.com/question/26568496 http://blog.jobbole.com/97150/ 文章通过多个角度对两者进行对比,根据 ...
- unittest(22)- p2p项目实战(2)-http_request
# 2. http_request.py import requests from learn_logging_5.write_log_class import MyLog my_logger = M ...
- Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...
- 机器学习入门-逻辑(Logistic)回归(1)
原文地址:http://www.bugingcode.com/machine_learning/ex3.html 关于机器学习的教程确实是太多了,处于这种变革的时代,出去不说点机器学习的东西,都觉得自 ...
- Maven本地仓库在C盘下无法自动下载相关依赖的问题
打开项目时用管理员权限!!!
- 码海拾遗:简述C++(一)
C++是Bjarne Stroustrup博士于1982年,在C语言的基础上引入并扩充了面向对象的概念后发明的一种新的程序语言.就与C语言的渊源而言,C++可以说是C语言的超集,它兼容C的一切(可能是 ...
- MySQL安装和常用命令
一.安装MySQL groupadd mysqluseradd -r -g mysql mysqlgroups mysqlfind / -name mysql | xargs rm -rfwget h ...
- 银行储蓄程序(C++,simple)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- C++走向远洋——26(项目二,2,构造函数与析构函数)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:game.cpp * 作者:常轩 * 微信公众号:Worldhe ...