js实现表单序列化的两种方法。

Posted 2020-08-22 赵小磊

 

function serialize(form) {
    var parts = [],
            elems = form.elements,
            i = 0,
            len = elems.length,
            filed = null;
    for (; i < len; i++) {
        filed = elems[i];
        switch (filed.type) {
            case "select-one":
            case "select-multiple":
                if (filed.name.length) {
                    var j = 0,
                            opt,
                            optLen = filed.options.length;
                    for (; j < optLen; j++) {
                        opt = filed.options[j];
                        if (opt.selected) {
                            parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(opt.value));
                        }
                    }
                }
                break;
            case undefined:
            case "submit":
            case "reset":
            case "file":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if (!filed.checked) {
                    break;
                }
            default:
                if (filed.name.length && filed.value) {
                    parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(filed.value));
                }
        }
    }
    return parts.join("&");
}

 

 这个方法重点用了html5中的FormData ，还有es6中for of循环。

  function serialize(form) {
        var formData = new FormData(form),
            getValue = formData.entries(),
            parts = [];
        for (var pair of getValue) {
            parts.push(pair[0] + "=" + pair[1]);
        }
        return parts.join("&");
    }