【轉載張鑫旭】原生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('&');    
};

主要用在移動端，不使用zepto或者jquery之類JS庫的場景，尚未嚴格測試，基本功能足夠滿足。

原文地址：https://www.zhangxinxu.com/php/microCodeDetail?id=7