2016-06-24 11 views
0

私は自分のエンティティの1つにバインドされたスプリングタグフォームを持っています。
私がフォームをポストしていたとき。すべてがうまくいきました。
now;私は自分のアプリを100%安らかに移行しています。
フォームをバネタグでそのまま残し、Ajax JQueryを使用してコントローラにデータを送信しました。投稿Ajax複雑なスプリングフォームからスプリングコントローラ

問題
フォームが複雑で、私のオブジェクト"申請者"は、他のネストされたオブジェクトが含まれてい"連絡先" & "教育"

jQueryはフォームをJSONにシリアル化していますが、contactと呼ばれるjson要素を作成してその内部にすべてのプリミティブを配置する代わりに、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; 
    } 
} 

答えて

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

おかげグエン、それは便利なAPIです。 –

関連する問題