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数据传给接口，就完事了