进入我的博客

这里有您在其他地方看不到的web前端方面的技术、知识及资源

这里有您在其他地方看不到的web前端方面的技术、知识及资源

张鑫旭-鑫空间-鑫生活

it's my whole life!

我的微码

« 查看全部微码

原生JS表单序列化

2017-03-04 12:00

主要用在移动端,不使用zepto或者jquery之类JS库的场景,尚未严格测试,基本功能足够满足。

相关文章:暂无

完整代码

// 表单序列化,IE9+
HTMLFormElement.prototype.serialize = function() {
    var form = this;
    // 表单数据
    var arrFormData = [], objFormData = {};

    [].slice.call(form.elements).forEach(function(ele) {
        // 元素类型和状态
        var type = ele.type, disabled = ele.disabled;

        // 元素的键值
        var name = ele.name, value = encodeURIComponent(ele.value || 'on');

        // name参数必须,元素非disabled态,一些类型忽略
        if (!name || disabled || !type || (/^reset|submit|image$/i.test(type)) || (/^checkbox|radio$/i.test(type) && !ele.checked)) {
            return;
        }

        type = type.toLowerCase();

        if (type !== 'select-multiple') {
            if (objFormData[name]) {
                objFormData[name].push(value);
            } else {
                objFormData[name] = [value];
            }
        } else {
            [].slice.call(ele.querySelectorAll('option')).forEach(function(option) {
                var optionValue = encodeURIComponent(option.value || 'on');
                if (option.selected) {
                    if (objFormData[name]) {
                        objFormData[name].push(optionValue);
                    } else {
                        objFormData[name] = [optionValue];
                    }
                }
            });
        }                
    });

    for (var key in objFormData) {
        arrFormData.push(key + '=' + objFormData[key].join());
    }

    return arrFormData.join('&');    
};

标签:JS

分享:新浪微博

评论

0人参与,0条评论)

抱歉,服务器忙,未能成功提交,稍后重试。