js_表单序列化

• 将表单的结果通过以[name]=[value]的方式，通过&符号连接起来

    <form action="#" method="post" id="form1">
        <label for="uname">
            <input type="text" id="uname" name="uname">
        </label>
        <label for="pwd">
            <input type="password" name="pwd" id="pwd">
        </label>
        <select name="sel" id="" multiple>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
            <option value="e">e</option>
            <option value="f">f</option>
        </select>
        <label for="man">man:
            <input type="radio" name="sex" id="man">
        </label>
        <label for="woman">woman:
            <input type="radio" name="sex" id="woman">
        </label>
        <input type="button" value="Click" id="btn">
    </form>

        let oForm = document.forms[0];

        document.getElementById('btn').onclick = function () {
            let res = serialize(oForm);
            console.log(res);

        }


        function serialize(form) {
            let optValue;
            let res = [];
            // 使用数组储存数据，方便使用 & 分隔
            for (const el of form.elements) {
                switch (el.type) {
                    case "select-one":
                    case "select-multiple":
                        if (el.name.length) {
                            // 如果下拉列表框name属性有设定值的话
                            for (let option of el.options) {
                                // 迭代 <option> 标签
                                if (option.selected) {
                                    if (option.hasAttribute) {
                                        optValue = (option.hasAttribute('value') ? option.value : option.text);
                                    } else {
                                        optValue = (option.attributes['value'].specified ? option.value : option.text);
                                    }
                                    res.push(`${encodeURIComponent(el.name)}=${encodeURIComponent(optValue)}`)
                                }
                            }
                        }
                        break;
                    case undefined:
                    case "file":
                    case "submit":
                    case "reset":
                    case "button":
                        break;

                    case "radio":
                    case "checkbox":
                        if (!el.checked) {
                            break;
                        }
                        default:
                            if (el.name.length) {
                                res.push(`${encodeURIComponent(el.name)}=${encodeURIComponent(el.value)}`);
                            }
                }
            }
            return res.join("&");
        }