ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

表单序列化的几种方式

2021-11-14 17:31:58  阅读:190  来源: 互联网

标签:false form serialize 几种 表单 var 序列化 select


jquery

serializeArray()

var data = $("#updateChannelForm").serializeArray();
例如我想添加sex="男"
dataParam.push({"name":"sex","value":"男"});

serialize()

var data = $form.serialize()
//添加键值对
$form.serialize()+'&'+$.param({content:content})

html5中的FormData

var data = new FormData($("#subForm")[0]);
//添加键值对 ,第三个参数是可选的
FormData.append(name, value, filename);

使用formData序列化数据作为jquery发送Ajax时记得jquery下面三个选项要加上

cache: false,
processData: false,
contentType: false,

cache设置为false,上传文件不需要缓存。

processData参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照’application/x-www-form-urlencoded’的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。

contentType设置为false。因为是由form表单构造的FormData对象,且已经声明了属性enctype="mutipart/form-data",所以这里设置为false。

自己用原生js封装

Object.prototype.serialize = function(){
    var res = [],   //存放结果的数组
        current = null, //当前循环内的表单控件
        i,  //表单NodeList的索引
        len, //表单NodeList的长度
        k,  //select遍历索引
        optionLen,  //select遍历索引
        option, //select循环体内option
        optionValue,    //select的value
        form = this;    //用form变量拿到当前的表单,易于辨识

    for(i=0, len=form.elements.length; i<len; i++){

        current = form.elements[i];

        //disabled表示字段禁用,需要区分与readonly的区别
        if(current.disabled) continue;

        switch(current.type){
            //可忽略控件处理
            case "file":    //文件输入类型
            case "submit":  //提交按钮
            case "button":  //一般按钮
            case "image":   //图像形式的提交按钮
            case "reset":   //重置按钮
            case undefined: //未定义
                break;
            //select控件
            case "select-one":
            case "select-multiple":
                if(current.name && current.name.length){
                    console.log(current)
                    for(k=0, optionLen=current.options.length; k<optionLen; k++){
                        option = current.options[k];
                        optionValue = "";
                        if(option.selected){
                            if(option.hasAttribute){
                                optionValue = option.hasAttribute('value') ? option.value : option.text
                            }else{
                                //低版本IE需要使用特性 的specified属性,检测是否已规定某个属性
                                optionValue = option.attributes('value').specified ? option.value : option.text;    
                            }
                        }
                        res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
                    }
                }
                break;

            //单选,复选框
            case "radio":
            case "checkbox":
                //这里有个取巧 的写法,这里的判断是跟下面的default相互对应。
                //如果放在其他地方,则需要额外的判断取值
                if(!current.checked) break;

            default:
                //一般表单控件处理
                if(current.name && current.name.length){
                    res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
                }
        }
    }
    return res.join("&");
}

使用

formElement.serialize();

得到类似如下结果:a=1&b=2&c=3&d=4&e=5

标签:false,form,serialize,几种,表单,var,序列化,select
来源: https://www.cnblogs.com/lujiahao/p/15552597.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有