系统学习前端之表单序列化

antz 发布于2019-08-01 15:38 / 1076人阅读

摘要：表单序列化概述随着的出现，表单的序列化已经是一个常见的需求。元素的值，就是选中的元素的属性的值，如果元素没有属性，则是元素的文本值。参考高级程序设计

表单序列化 1. 概述

随着Ajax的出现，表单的序列化已经是一个常见的需求。我们先明确表单提交时，浏览器是怎么样将数据发送给服务器的

对表单字段的名称和值进行URL编码（调用encodeURIComponent()方法），使用&分隔，无论是get还是post请求，都是一样的

不发送禁用的表单字段，即属性disabled为true的

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

不发送type为reset和button的按钮

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

在单击提交按钮表单的情况下，也会发送提交按钮的value值，否则不发送提交按钮。

select元素的值，就是选中的option元素的value属性的值，如果option元素没有value属性，则是option元素的文本值。

2. 实现

跟据上述，我们可以来实现一个表单的序列化，代码是对《JavaScript高级程序设计》表单脚本一章中的代码改进

增加参数验证

将form.elements转为数组，提高性能

改进多选选择框，同一个参数名的值进行合并,试验了一下，如果options没有HTML的value属性，读取该option的value属性会等于它的text属性(测试浏览器 IE8，chrome)

function serialize(form) {
    // 参数验证
    if(!form && form.nodeName.toUpperCase() != "FORM" ){
        throw new Error("invalid parameters");
    }
    
    var encode = window.encodeURIComponent,
        slice = Array.prototype.slice;

    var params = [],
        i = 0,
        fields = slice.call(form.elements),
        len = fields.length,
        el,
        type;

    for(;i < len; i++){
        el = fields[i];
        type = el.type.toLowerCase();
        switch(type){
            case  "undefined":
            case  "button":
            case  "submit":
            case  "reset":
            case "file":
                break;
            case "select-one":
            case "select-multiple":
                if(el.name.length){
                    var j = 0, 
                        opts = slice.call(el.options),
                        oLen = opts.length,
                        selected = [] , // 用于合并参数
                        opt;            
                    for(; j < oLen; j++){
                        opt = opts[j];
                        if(!opt.selected)continue;
                        selected.push(opt.value);
                    }
                    params.push(encode(el.name) + "=" + encode(selected.join(",")));
                }
                break;
            case "checkbox":
            case "radio":
                if(!el.checked){
                    break;
                }   
            default:
                if(el.name.length){
                    params.push(encode(el.name) + "=" + encode(el.value));
                }
        }
    }
    return params.join("&");
};

以上代码在IE8会报错，原因是option元素的实现并非一个JavaScript对象，导致无法使用slice，当然解决的方法也有，就是重写slice函数，但是这脱离了本章节的主题。

参考

《JavaScript高级程序设计》

GPU云服务器云服务器表单序列化 js表单序列化 js 序列化表单数据类型 js表单序列化格式化

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

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

系统学习前端之表单序列化

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

curried 2019-08-20 10:29 评论0 收藏0
系统学习前端之FormData详解

摘要：概述类型其实是在级定义的，它是为序列化表以及创建与表单格式相同的数据当然是用于传输提供便利。如果是使用表单初始化，每一个表单字段对应一条数据，它们的属性即为值，它们属性对应值。参考兼容性查询高级程序设计 FormData 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. ...

jhhfft 2019-08-20 10:32 评论0 收藏0
在线Excel开发之新人学习笔记 - 工作簿2

摘要：支持以下自定义特性的序列化与反序列化自定义单元格类型，自定义函数，自定义格式，自定义函数迷你图，自定义标签，以及自定义行筛选。 Spread JSON 导入导出在SpreadJS表单控件中可以导入导出JSON数据，收集界面的录入数据，数据源序列化若要将表单中的数据源序列化到JSON对象中，可以设置参数includeBindingSource: true，若未设置默认为false....

cgspine 2019-08-23 16:31 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0