如何实现表单序列化及表单序列化操作实例代码

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

随着 Ajax的出现，表单序列化已经成为一种常见需求。在 JavaScript中，可 以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前， 有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。
? ? ? ? ◎对表单字段的名称和值进行 URL编码，使用和号（&）分隔。?
? ? ? ? ◎不发送禁用的表单字段。
? ? ? ? ◎只发送勾选的复选框和单选按钮。
? ? ? ? ◎不发送 type 为"reset"和"button"的按钮。
? ? ? ? ◎多选选择框中的每个选中的值单独一个条目。
? ? ? ? ◎在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type 为"image"的元素。
? ? ? ? ◎元素的值，就是选中的元素的 value 特性的值。如果元素没有 value 特性，则是元素的文本值。?
? ? ? ?在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。 除此之外的其他上述规则都应该遵循。接下来南昌网络公司网络前端开发工程师介绍实现表单序列化的代码。?



? ? ? ?

? ? ? ?

? ? ? ? ? ? ?

Red
? ? ? ? ? ? ?

Green

? ? ? ? ? ? ?

Blue

? ? ? ?

? ? ? ?

Locations

? ? ? ?Where do you want to live?
? ? ? ?
? ? ? ? ? ? ? Sunnyvale
? ? ? ? ? ? ? Los Angeles
? ? ? ? ? ? ? Mountain View
? ? ? ? ? ? ? China
? ? ? ? ? ? ? Australia
? ? ? ?

? ? ? ?Where do you want to work?
? ? ? ?
? ? ? ? ? ? ? Sunnyvale
? ? ? ? ? ? ? Los Angeles
? ? ? ? ? ? ? Mountain View
? ? ? ? ? ? ? China
? ? ? ? ? ? ? Australia
? ? ? ?

? ? ? ?
?



? ? ? ?上面这个 serialize()函数首先定义了一个名为 parts 的数组，用于保存将要创建的字符串的各 个部分。然后，通过 for 循环迭代每个表单字段，并将其保存在 field 变量中。在获得了一个字段的 引用之后，使用 switch 语句检测其 type 属性。序列化过程中麻烦的就是元素，它可能 是单选框也可能是多选框。为此，需要遍历控件中的每一个选项，并在相应选项被选中的情况下向数组 中添加一个值。对于单选框，只可能有一个选中项，而多选框则可能有零或多个选中项。这里的代码适 用于这两种选择框，至于可选项的数量则是由浏览器控制的。在找到一个选中项之后，需要确定使用什 么值。如果不存在 value 特性，或者虽然存在该特性，但值为空字符串，都要使用选项的文本来代替。 为检查这个特性，在 DOM 兼容的浏览器中需要使用 hasAttribute()方法，而在 IE 中需要使用特性 的 specified 属性。?
? ? ? ?如果表单中包含

元素，则该元素会出现在元素集合中，但没有 type 属性。因此，如果 type 属性未定义，则不需要对其进行序列化。同样，对于各种按钮以及文件输入字段也是如此（文件输入字段在 表单提交过程中包含文件的内容；但是，这个字段是无法模仿的，序列化时一般都要忽略）。对于单选按钮 和复选框，要检查其 checked 属性是否被设置为 false，如果是则退出 switch 语句。如果 checked 属性
为true，则继续执行 default 语句，即将当前字段的名称和值进行编码，然后添加到 parts 数组中。函数 的后一步，就是使用 join()格式化整个字符串，也就是用和号来分隔每一个表单字段。?
? ? ? ?最后，serialize()函数会以查询字符串的格式输出序列化之后的字符串。当然，要序列化成其他 格式，也不是什么困难的事。?

? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-网络 http://www.huicuiwang.cn/ 如转载请注明出处!

PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！

上一篇：工厂管理APP开发的重要性

下一篇：上海软件开发公司排名【外包公司排名】

返回列表页



Copyright © 20019-2023 荟萃信息网 版权所有 蜀ICP备16021156号-2

电 话：0    手 机：0    传 真：    E-mail：2074917417@qq.com

地 址：成都市金牛区

技术支持：荟萃网络科技   

扫码关注我们

网站首页 | app开发| 小程序开发| SEM竞价托管| 行业资讯

扫码关注我们