• 表单序列化


     浏览器是怎样将数据发给服务器的

    1、对表单字段的名称和值进行URL编码,使用和(&)分隔。

    2、不发送禁用的表单字段

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

    4、不发送type为‘reset’和‘button’的按钮

    5、多选选择框中的每个选中的值单独一个条目

    6、在单击提交按钮提交表单的情况下,也会发送提交按钮,否则,不发送提交按钮。也包括type为'imge'的<input>元素

    7、<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.sttributes['value'].specified ? option.value : option.text);
                                        }
                                        parts.push( encodeURIComponet(field.anme) + '=' + ebcodeURIComponet(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('&');
            }
  • 相关阅读:
    JavaScript自动化构建工具grunt、gulp、webpack介绍
    开始使用 Vuejs 2.0 ---简单总结2
    开始使用 Vuejs 2.0 ---简单总结1
    Bootboxjs快速制作Bootstrap的弹出框效果
    FlexSlider是一个非常出色的jQuery滑动切换插件
    CSS实现背景透明,文字不透明(兼容各浏览器)
    jquery中attr和prop的区别
    GitHub 的分支创建与合并
    [译]使用NuGet管理共享代码
    [译]Nuget.Server
  • 原文地址:https://www.cnblogs.com/jokes/p/9905269.html
Copyright © 2020-2023  润新知