1.   Object.prototype.serialize = function () {
    2.         var res = [],   //存放结果的数组
    3.             current = null, //当前循环内的表单控件
    4.             i,  //表单NodeList的索引
    5.             len, //表单NodeList的长度
    6.             k,  //select遍历索引
    7.             optionLen,  //select遍历索引
    8.             option, //select循环体内option
    9.             optionValue,    //select的value
    10.             form = this;    //用form变量拿到当前的表单，易于辨识
    12.         for (i = 0, len = form.elements.length; i < len; i++) {
    14.             current = form.elements[i];
    16.             //disabled表示字段禁用，需要区分与readonly的区别
    17.             if (current.disabled) continue;
    19.             switch (current.type) {
    20.                 //可忽略控件处理
    21.                 case "file":    //文件输入类型
    22.                 case "submit":  //提交按钮
    23.                 case "button":  //一般按钮
    24.                 case "image":   //图像形式的提交按钮
    25.                 case "reset":   //重置按钮
    26.                 case undefined: //未定义
    27.                     break;
    28.                 //select控件
    29.                 case "select-one":
    30.                 case "select-multiple":
    31.                     if (current.name && current.name.length) {
    32.                         console.log(current)
    33.                         for (k = 0, optionLen = current.options.length; k < optionLen; k++) {
    34.                             option = current.options[k];
    35.                             optionValue = "";
    36.                             if (option.selected) {
    37.                                 if (option.hasAttribute) {
    38.                                     optionValue = option.hasAttribute('value') ? option.value : option.text
    39.                                 } else {
    40.                                     //低版本IE需要使用特性 的specified属性，检测是否已规定某个属性
    41.                                     optionValue = option.attributes('value').specified ? option.value : option.text;
    42.                                 }
    43.                             }
    44.                             res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
    45.                         }
    46.                     }
    47.                     break;
    49.                 //单选，复选框
    50.                 case "radio":
    51.                 case "checkbox":
    52.                     //这里有个取巧 的写法，这里的判断是跟下面的default相互对应。
    53.                     //如果放在其他地方，则需要额外的判断取值
    54.                     if (!current.checked) break;
    56.                 default:
    57.                     //一般表单控件处理
    58.                     if (current.name && current.name.length) {
    59.                         res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
    60.                     }
    61.             }
    62.         }
    63.         return res.join("&");
    64.     }
    65. --------------------------------------------------------------------------------
    66.     //注册
    67.     document.querySelector('#regBox form').onsubmit = function (e) {
    68.         e.preventDefault()
    69.         //  发送axios注册请求
    70.         axios({
    71.             url: '/api/reguser',
    72.             method: 'post',
    73.             data: this.serialize()
    74.         }).then(({ data: res }) => {
    75.             //成功回调
    76.             console.log(res)
    77.         })
    78.     }
    79.     //登录
    80.     document.querySelector('#loginBox form').onsubmit = function (e) {
    81.         e.preventDefault()
    82.         axios({
    83.             url: '/api/login',
    84.             method: 'POST',
    85.             data: this.serialize()
    86.         }).then(({ data: res }) => {
    87.             //成功回调
    88.             console.log(res)
    89.         });
    90.     }

    对HTML表单使用：
    1.formElement.serialize();
    2.复制代码