将Ajax复杂的弹簧形式发布到弹簧控制器上

时间:2016-06-24 16:41:16

标签: jquery json spring-mvc

我有一个弹簧标签表格绑定到我的一个实体。
当我刚发布表格时;一切都很好。
现在;我正在迁移我的应用程序以保持100%的安静 我刚刚使用spring标签离开了表单,并使用Ajax JQuery将数据发布到我的控制器。

问题
表单很复杂,我的对象“申请人”包含其他嵌套对象“联系人”& “教育”

jQuery正在将表单序列化为JSON,但是,它创建了一个名为contact:{email="xx@xx"}的简单原语,而不是创建一个名为contact的json元素并将其所有原语放在其中contact.email"xx@xx"

因此;我发现控制器中的元素联系为null。 (在控制器端正确接收lastName和firstName这样的简单基元。)

有人知道如何解决这个问题,或者是否有任何jQuery API会将复杂的spring表单序列化为JSON?

感谢。

<form:form commandName="applicant" action="addApplicant" method="post"
    id="submitForm">

    <%-- <input type="hidden" name="${_csrf.parameterName}"
        value="${_csrf.token}" /> --%>
    <div class="panel panel-default" id="applicantDetailsPanel">
        <div class="panel-body" style="padding-top: 0px;">
            <div class="row">
                <div class="col-lg-11">
                    <h3>Applicant's Details</h3>
                    <hr>
                </div>
                <div class="col-lg-1">
                    <div class="roundedOne pull-right">
                        <input type="checkbox" value="None" id="roundedOne"
                            name="check" /> <label for="roundedOne"></label>
                    </div>

                </div>
                <div class="col-lg-12">
                    <div class="panel panel-default panel-sun-theme">
                        <div class="panel-heading">Applicant's Identification</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <form:input class="form-control" placeholder="Last Name"
                                            path="lastName" />
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <form:input class="form-control" placeholder="First Name"
                                            path="firstName" />
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Middle Name</label>
                                        <form:input class="form-control"
                                            placeholder="Middle Name" path="middleName" />
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>DOB (MM/DD/YYYY)</label>
                                        <form:input class="form-control" placeholder="MM/DD/YYYY"
                                            path="birthDate" />
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Place Of Birth</label>
                                        <form:input class="form-control"
                                            placeholder="Place Of Birth" path="birthPlace" />
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Passport Number</label>
                                        <form:input class="form-control"
                                            placeholder="Passport Number" path="passportNum" />
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Date Of Issue</label>
                                        <form:input class="form-control" placeholder="MM/DD/YYYY"
                                            path="passportIssueDate" />
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Date Of Expiry </label>
                                        <form:input class="form-control" placeholder="MM/DD/YYYY"
                                            path="passportExpDate" />
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Place Of Issue</label>
                                        <form:input class="form-control"
                                            placeholder="Place Of Issue" path="passportIssuePlace" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-12 -->

                <div class="col-lg-6">
                    <div class="panel panel-default panel-sun-theme">
                        <div class="panel-heading">Contact</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Mobile</label>
                                        <form:input class="form-control" placeholder="Mobile"
                                            path="contact.cellPhone" />
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Telephone</label>
                                        <form:input class="form-control" placeholder="Telephone"
                                            path="contact.phonePrimary" />
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Email </label> +
                                        <div class="input-group">
                                            <span class="input-group-addon"
                                                style="background-color: #5584A2; color: white; border: white">@</span>
                                            <form:input class="form-control" placeholder="Email"
                                                path="contact.emailPrimary" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Street</label>
                                        <form:input class="form-control" placeholder="Street"
                                            path="contact.addressLine1" />
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Apt #</label>
                                        <form:input class="form-control" placeholder="Apt #"
                                            path="contact.addressLine2" />
                                    </div>
                                </div>

                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label>City </label>
                                        <form:input class="form-control" placeholder="City"
                                            path="contact.city" />
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label>Wilaya </label>
                                        <form:input class="form-control" placeholder="Wilaya"
                                            path="contact.state" />
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Zip Code </label>
                                        <form:input class="form-control" placeholder="Zip Code"
                                            path="contact.zipCode" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-6 -->

                <div class="col-lg-6">
                    <div class="panel panel-default panel-sun-theme">
                        <div class="panel-heading">Education</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="form-group">
                                        <label>Level</label>
                                        <form:input class="form-control"
                                            placeholder="Ex: Bac, Bac+1, Master.."
                                            path="education.level" />
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label>Degree</label>
                                        <form:input class="form-control"
                                            placeholder="Ex: Management" path="education.degree" />
                                    </div>
                                </div>

                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Date Of Issue </label>
                                        <form:input class="form-control" placeholder="MM/DD/YYYY"
                                            path="education.degreeIssueDate" />
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Speciality</label>
                                        <form:input class="form-control"
                                            placeholder="Ex: Business in IT"
                                            path="education.speciality" />
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label>Grade</label>
                                        <form:input class="form-control" placeholder="Grade #"
                                            path="education.grade" />
                                    </div>
                                </div>

                                <div class="col-lg-5">
                                    <div class="form-group">
                                        <label>Establishment Name</label>
                                        <form:input class="form-control"
                                            placeholder="Ex:Badji Mokhtar"
                                            path="education.establishmentName" />
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label>Phone </label>
                                        <form:input class="form-control" placeholder="Phone"
                                            path="education.establishementPhone" />
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label>Email </label>
                                        <form:input class="form-control" placeholder="Email"
                                            path="education.establishementEmail" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-6 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /. panel-body -->
        <div class="panel-footer ">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form:form>

代码:

@Controller public class ApplicantController {

    @RequestMapping(value = "/addApplicant", method = RequestMethod.POST)
    public @ResponseBody Applicant submittedFromData(@RequestBody Applicant applicant, HttpServletRequest request) {
        System.out.println(applicant.getContact());
        applicantService.saveApplicant(applicant);
        System.out.println(applicant.getLastName());
        return applicant;
    }
}

1 个答案:

答案 0 :(得分:0)

JSON.stringify仅序列化一个简单的对象/数组。为了序列化具有嵌套对象的复杂对象,您可以考虑使用第三方库。以下是您可能会找到的https://github.com/yeoman/stringify-object

之一

关于其用法的一个例子。

var obj = {
    foo: 'bar',
    'arr': [1, 2, 3],
    nested: { hello: "world" }
};

var pretty = stringifyObject(obj, {
    indent: '  ',
    singleQuotes: false
});

console.log(pretty);
/*
{
    foo: "bar",
    arr: [
        1,
        2,
        3
    ],
    nested: {
        hello: "world"
    }
}
*/