jQuery序列化表单相关

划水摸鱼的时候研究了jq表单序列化的3种方式，分别是serialize()、serializeArray()、FormData()，在此分享一下！
首先抛出公共的代码部分，如下：

/***** CSS *****/


/***** HTML *****/

    

        

            姓名：
            
        
        

            性别：
            男
            女
        
        

            照片：
            
        
        

            籍贯：
            
        
        

            所属部门：
            
        
        

            联系电话：
            
        
        

            入职时间：
            
        
        提交
    


    
结果：
    


/***** 引用的JS *****/

serialize()：

/***** 主要的JS代码 *****/


/***** 输出的字符串 *****/
userName=%E5%BC%A0%E4%B8%89&sex=male&nativePlace=%E9%99%95%E8%A5%BF%E8%A5%BF%E5%AE%89&department=%E6%8A%80%E6%9C%AF%E7%A0%94%E5%8F%91%E9%83%A8&phone=1234567890&entryTime=2020-07-02

输出结果

可以看出：
1.取得的字符串中的中文已被编码
2.无法取得照片

/***** 改写后的JS代码 *****/


/***** 输出的字符串 *****/
userName=张三&sex=male&nativePlace=陕西西安&department=技术研发部&phone=1234567890&entryTime=2020-07-02

小结：serialize()方法序列化表单依赖于input的name属性；默认会编码中文；无法序列化文件输入框

serializeArray()：

/***** 主要的JS代码 *****/


/***** 输出的字符串 *****/
[{"name":"userName","value":"张三"},{"name":"sex","value":"male"},{"name":"nativePlace","value":"陕西西安"},{"name":"department","value":"技术研发部"},{"name":"phone","value":"1234567890"},{"name":"entryTime","value":"2020-07-02"}]

输出结果

可以看出：
1.取得的是对象数组
2.无法取得照片

/***** 改写后的JS代码 *****/


/***** 输出的字符串 *****/
{"userName":"张三","sex":"male","nativePlace":"陕西西安","department":"技术研发部","phone":"1234567890","entryTime":"2020-07-02"}

小结：serializeArray()方法序列化表单依赖于input的name属性；默认序列化得到的是对象数组；无法序列化文件输入框

FormData()：

注意：FormData()序列化表单依赖于input的name属性，可将整个表单中的输入数据POST到后台，包括输入框的值和文件

/***** 主要的JS代码 *****/

/***** C#取表单中的值 *****/
string userName = Request.Form["userName"];
HttpPostedFileBase File = Request.Files["photo"];

FormData()的其他方法：

//通过FormData构造函数创建一个空对象
var formData = new FormData();

//1.通过append(key, value)在数据末尾追加数据
formData.append("userName", "liujiao");
formData.append("userName", "zhangsan");

//2.通过get(key)与getAll(key)来获取相对应的值
formData.get("userName"); //获取key为userName的第一个值
formData.getAll("userName"); //获取key为userName的所有值，返回值为数组类型

//3.通过set(key, value)来设置修改数据
formData.set("userName", "lisi"); //key值不存在，会添加一条数据；key值存在，会修改对应的value值

//4.通过has(key)来判断是否存在对应的key
formData.has("userName"); //返回值为true或false

//5.通过delete(key)可以删除数据
formdata.delete("userName");

相关参考：点击前往