關於serialize() FormData serializeArray()表單序列化

serialize()  FormData  serializeArray()都是序列化表單，實現表單的異步提交

可是serialize()和serializeArray()都是隻能序列化表單中的數據，好比input  select等的數據，可是對於文件上傳就只能用 FormData。

html代碼

<form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" name='firstname' class="form-control" id="firstname" 
                       placeholder="請輸入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
                <input type="text" name="lastname" class="form-control" id="lastname" 
                       placeholder="請輸入姓">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default">登陸</button>
            </div>
        </div>
    </form>

 

formdata看代碼

$('.btn-default').click(function () {
            var formData = new FormData();
            formData.append("firstname", $('#firstname').val());
            formData.append("lastname", $('#lastname').val());

            $.ajax({
                headers: {
                    Accept: "application/json; charset=utf-8"//設置headers裏的accept
                },
                type: 'POST',
                data: formData,
                url: 'wwww',
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    if (typeof (data) == undefined) {
                        alert("用戶信息已丟失，請從新登陸！");
                    }
                    if (data.ErrorMsg == "") {
                        alert('美文發佈成功！');
                    } else { 
                        alert(data.ErrorMsg); 
                    }
                }
            });

        });

提交後顯示結果

serialize()看代碼

$('.btn-default').click(function () {

           var formData=$("form").serialize();//序列化表單
            $.ajax({
                headers: {
                    Accept: "application/json; charset=utf-8"//設置headers裏的accept
                },
                type: 'POST',
                data: formData,
                url: 'wwww',
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    if (typeof (data) == undefined) {
                        alert("用戶信息已丟失，請從新登陸！");
                    }
                    if (data.ErrorMsg == "") {
                        alert('美文發佈成功！');
                    } else { 
                        alert(data.ErrorMsg); 
                    }
                }
            });

        });

顯示結果

serializeArray()看代碼

$('.btn-default').click(function () {

           var formData=$("form").serializeArray();//序列化表單json
           console.log(formData);//打印出數據
            $.ajax({
                headers: {
                    Accept: "application/json; charset=utf-8"//設置headers裏的accept
                },
                type: 'POST',
                data: formData,
                url: 'wwww',
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    if (typeof (data) == undefined) {
                        alert("用戶信息已丟失，請從新登陸！");
                    }
                    if (data.ErrorMsg == "") {
                        alert('美文發佈成功！');
                    } else { 
                        alert(data.ErrorMsg); 
                    }
                }
            });

        });

顯示結果