JavaScript 表单脚本——“表单序列化”的注意要点

BlackHole1 发布于2019-08-19 17:29 / 3537人阅读

摘要：浏览器如何将数据发送给服务器对表单字段的名称和值进行编码，使用和号分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送为和的按钮多选框中每个选中的值多带带一个条目在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。

浏览器如何将数据发送给服务器：

对表单字段的名称和值进行URL编码，使用和号（&）分隔

不发送禁用的表单字段

只发送勾选的复选框和单选按钮

不发送type为“reset”和“button”的按钮

多选框中每个选中的值多带带一个条目

在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。也包括type为“image”的input元素

select元素的值，就是选中的option元素的value特性值

实现表单序列化的代码：

function serialize(form) {
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;

    for (var 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 (var j = 0, optLen = field.options.length; j < optLen; j++) {
                    option = field.options[j];
                    if (option.selected) {
                        optValue = "";
                        if (option.hasAttributes) {
                            optValue = ((option.hasAttributes("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;
                }
            //这里没有break
            default:
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    };
    return parts.join("&");
}

这个函数首先定义了一个名为parts的数组，用于保存要创建的字符串的各个部分；

然后通过for循环迭代每个表单字段，并将其保存在field变量中；

用switch语句检测type属性；

最麻烦的就是select元素，因为他有单选和多选之分，还要检查是否存在value值，如果不存在就获取其text值，在DOM兼容的浏览器中需要使用hasAttribute()方法，在IE中则需要使用specified属性；

对于fieldset元素，没有type属性就不需要序列化；

其他诸如按钮文件输入字段等等都要忽略；

最后对于单选按钮和复选框，要检查其checked属性是否为false，如果是则退出switch语句；如果为true，则继续执行default语句（所以checkbox的break行代码后面没有break，而是default）；

default语句则是将当前字段的名称和值进行编码并添加到parts数组中；

最后就是利用join()函数格式化整个字符。

GPU云服务器云服务器表单序列化 js表单序列化 js表单序列化格式化云主机的要点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78574.html

表单脚本

摘要：文本框脚本有两种方式表现文本框的单行文本框和的多行文本框。对于单行文本框，通过特性可以指定文本框能够显示的字符数，通过特性访问其内容，而则用于指定其可以接受的最大字符数。 title: 表单脚本 date: 2016-12-19 15:17 tags: JavaScript 0x00 表单基础在 HTML 中，表单由元素来表示，但是在 JavaScript 中，表单对应...

stormgens 2019-08-21 11:19 评论0 收藏0
系统学习前端之表单序列化

摘要：表单序列化概述随着的出现，表单的序列化已经是一个常见的需求。元素的值，就是选中的元素的属性的值，如果元素没有属性，则是元素的文本值。参考高级程序设计表单序列化 1. 概述随着Ajax的出现，表单的序列化已经是一个常见的需求。我们先明确表单提交时，浏览器是怎么样将数据发送给服务器的对表单字段的名称和值进行URL编码（调用encodeURIComponent()方法），使用&分隔，...

antz 2019-08-01 15:38 评论0 收藏0
系统学习前端之表单序列化

摘要：表单序列化概述随着的出现，表单的序列化已经是一个常见的需求。元素的值，就是选中的元素的属性的值，如果元素没有属性，则是元素的文本值。参考高级程序设计表单序列化 1. 概述随着Ajax的出现，表单的序列化已经是一个常见的需求。我们先明确表单提交时，浏览器是怎么样将数据发送给服务器的对表单字段的名称和值进行URL编码（调用encodeURIComponent()方法），使用&分隔，...

curried 2019-08-20 10:29 评论0 收藏0
form表单那点事儿(下) 进阶篇

摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。表单操作取值用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

jerryloveemily 2019-08-01 15:24 评论0 收藏0