将 Ajax 复杂的 spring 表单发布到 spring 控制器

Question

我有一个绑定到我的一个实体的弹簧标签表单。
当我刚刚发布表格时；一切正常。
现在;我正在将我的应用迁移到 100% 宁静。
我只是将表单与 spring 标记保持原样，并使用 Ajax JQuery 将数据发布到我的控制器。

问题：
表单很复杂，我的对象 "applicant" 包含其他嵌套对象 "Contact" & "Education"。

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

因此；我发现控制器中的元素联系人为空。 （简单的原语如 lastName 和 firstName 在控制器端被正确接收）。

有人知道我该如何解决这个问题，或者是否有任何 jQuery API 可以将复杂的弹簧表单序列化为 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;
    }
}

Answer 1

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"
    }
}
*/