jQuery序列化表单相关

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

/***** CSS *****/
<style>
    *{
        font-family: 微软雅黑;
    }
    .left{
        float: left;
    }
    .right{
        margin-left: 100px;
        display: inline-block;
    }
    .right textarea{
        width: 300px;
        height: 300px;
        font-size: 16px;
    }
</style>

/***** HTML *****/
<div class="left">
    <form id="personInfo">
        <p>
            <label>姓名：</label>
            <input type="text" name="userName">
        </p>
        <p>
            <label>性别：</label>
            <label><input type="radio" name="sex" value="male">男</label>
            <label><input type="radio" name="sex" value="female">女</label>
        </p>
        <p>
            <label>照片：</label>
            <input type="file" name="photo" accept="image/*">
        </p>
        <p>
            <label>籍贯：</label>
            <input type="text" name="nativePlace">
        </p>
        <p>
            <label>所属部门：</label>
            <input type="text" name="department">
        </p>
        <p>
            <label>联系电话：</label>
            <input type="text" name="phone">
        </p>
        <p>
            <label>入职时间：</label>
            <input type="date" name="entryTime">
        </p>
        <button type="button" onclick="saveInfo()">提交</button>
    </form>
</div>
<div class="right">
    <p>结果：</p>
    <textarea></textarea>
</div>

/***** 引用的JS *****/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

serialize()：

/***** 主要的JS代码 *****/
<script>
    function saveInfo(){
        var personInfo = $("#personInfo").serialize();
        $(".right textarea").html(personInfo);
    }
</script>

/***** 输出的字符串 *****/
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代码 *****/
<script>
    function saveInfo(){
        //默认serialize()方法会编码中文
        var personInfo = $("#personInfo").serialize();
        //将编码的中文解码
        var params = decodeURIComponent(personInfo, true);
        $(".right textarea").html(params);
    }
</script>

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

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

serializeArray()：

/***** 主要的JS代码 *****/
<script>
    function saveInfo(){
        var personArr = $("#personInfo").serializeArray();
        //将取得的数组对象转成字符串
        var params = JSON.stringify(personArr);
        $(".right textarea").html(params);
    }
</script>

/***** 输出的字符串 *****/
[{"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代码 *****/
<script>
    function saveInfo(){
        var personObj = {};
        var personArr = $("#personInfo").serializeArray();
        //组合成新对象
        $.each(personArr, function(i, item){
            personObj[item.name] = item.value;
        });
        //将得到的对象转成字符串
        var params = JSON.stringify(personObj);
        $(".right textarea").html(params);
    }
</script>

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

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

FormData()：

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

/***** 主要的JS代码 *****/
<script>
    function saveInfo(){
        var formData = new FormData($("#personInfo")[0]);
        $.ajax({                
            url: "/Main/AddPersonInfo?Rdm=" + Math.floor(Math.random() * 1000),
            type: "POST",
            dataType: "json",
            async: true,
            cache: false,
            contentType: false, //必要条件
            processData: false, //必要条件
            data: formData,
            success: function (data) {
                //do something
            },
            complete: function (XHR, TS) {
                XHR = null
            },
            error: function (e) {
                alert("服务器太累啦，需要喘口气呢~")
            }
        }); 
    }
</script>

/***** 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");

相关参考：点击前往