我有一个弹簧标签表格绑定到我的一个实体。
当我刚发布表格时;一切都很好。
现在;我正在迁移我的应用程序以保持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;
}
}
答案 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"
}
}
*/