Jquery将form表單序列化成JSON對象

廢話不多說，直接上代碼

<form class="form-horizontal"  id="userEditForm" role="form" >
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">應用類型</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="appType"  id="Android" value="1" checked> Android
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="appType" id="ios" value="2"> ios
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="appType" id="web" value="3"> web
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appName" class="col-sm-2 control-label">應用名稱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="appName" id="appName" placeholder="請輸入應用名稱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appVersion" class="col-sm-2 control-label">應用版本</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="appVersion" id="appVersion" placeholder="請輸入應用版本">
                            </div>
                        </div>

                        <div class="form-group">
                        <label for="appPackage" class="col-sm-2 control-label">應用包名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="appPackage" id="appPackage" placeholder="請輸入應用包名">
                        </div>
                        </div>
                        <div class="form-group">
                            <label for="appDesc" class="col-sm-2 control-label">應用介紹</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appDesc" id="appDesc" placeholder="請填寫應用介紹資訊，最多700字"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appReportFunction" class="col-sm-2 control-label">測試報告</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appReportFunction" id="appReportFunction" placeholder="請輸入功能測試報告連結，每條l連結以'，'分隔"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appReportCompatible" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appReportCompatible" id="appReportCompatible" placeholder="請輸入相容測試報告連結，每條l連結以'，'分隔"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appReportPerformance" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appReportPerformance" id="appReportPerformance" placeholder="請輸入性能測試報告連結，每條l連結以'，'分隔"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appReportSec" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appReportSec" id="appReportSec" placeholder="請輸入安全測試報告連結，每條l連結以'，'分隔"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="appReportInterface" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="appReportInterface" id="appReportInterface" placeholder="請輸入接口測試報告連結，每條l連結以'，'分隔"></textarea>
                            </div>
                        </div>


                    </form>
           

将這個表單的資料送出給接口，接口所需為JSON對象

因為通過$("#form").serializeArray()輸出的是數組形式的，是以我們必須用别的方法

$(function(){
 //序列化表單
        $.fn.serializeObject = function()
        {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
        // 确定表單驗證
        $('#validateBtn').click(function() {
            $('#userEditForm').bootstrapValidator('validate');
            var params = $("#userEditForm").serializeObject(); //将表單序列化為JSON對象
            console.log(params)
            var url ="/admin/appApply/addAppApply.htm"
            $.post(url,params,function (resp) {
                $('#userEditForm').data('bootstrapValidator').resetForm(true);
                console.log(resp)
            }).error(function(){
                alert("出錯");
            });
               });
})
           

具體是怎麼轉化的呢？

1、

//序列化表單
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};      

先寫一個serializeObject将表單資料序列化的方法

2、var params = $("#userEditForm").serializeObject(); //将表單序列化為JSON對象，擷取到你要的對應表單json資料傳給接口，就完事了