Ajax 복잡한 스프링 폼을 스프링 컨트롤러에 게시

스프링 엔티티 폼을 내 엔티티 중 하나에 바인딩했습니다.
방금 양식을 게시 할 때; 모든 것이 잘 작동했다.
now; 내 앱을 100 % 편안하게 마이그레이션하려고합니다.
스프링 태그가있는 그대로 폼을 떠났고 Ajax JQuery를 사용하여 컨트롤러에 데이터를 게시했습니다.Ajax 복잡한 스프링 폼을 스프링 컨트롤러에 게시

문제 :
형태가 복잡 내 객체 "신청인" 다른 중첩 된 객체를 "연락처" & "교육"이 포함되어 있습니다.

jQuery는 양식을 JSON으로 serialize하지만 contact라는 json 요소를 만들고 contact:{email="[email protected]"} 안에 모든 프리미티브를 배치하는 대신 contact.email"[email protected]"이라는 간단한 프리미티브를 작성합니다.

따라서; 내 컨트롤러의 요소 연락처가 null로 나타납니다. (lastName과 firstName과 같은 간단한 프리미티브는 컨트롤러 쪽에서 올바르게 수신됩니다.)

아무도 내가이 문제를 해결할 수있는 방법을 알고 있거나 복잡한 스프링 양식을 JSON에 직렬화하는 jQuery API가 있습니까?

감사합니다.

<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; 
    } 
}

출처

2016-06-24 Tarek Sahalia

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

출처

2016-06-26 05:33:01

감사합니다. Nguyen, 유용한 API입니다. –

Ajax 복잡한 스프링 폼을 스프링 컨트롤러에 게시

답변

관련 문제