Wie man Daten von POJO und Controller zu Ajax passieren

Question

ich Daten von durch die Steuerung als Json bin vorbei die @ResponseBody Anmerkung verwenden. Mein Problem ist, dass Ajax die Daten von meinem Controller nicht erkennen kann. Wenn ich die typeof Daten in Ajax überprüfe, sagt es mir, dass es undefined ist.

@RequestMapping(value = "/basic/Json", method = RequestMethod.POST) 
    public @ResponseBody JsonResponse addCertJson(@Valid @ModelAttribute CertificateProgramme certificate, BindingResult result, Principal principal, Locale locale, MessageSource messageSource) { 
     JsonResponse res = new JsonResponse(); 
     User user = (User) ((UsernamePasswordAuthenticationToken) principal).getPrincipal(); 
     certificate.setUser(user); 
     if(!result.hasErrors()){ 
      res.setStatus("SUCCESS"); 
     }else{ 
      res.setStatus("FAIL"); 
      List<FieldError> allErrors = result.getFieldErrors(); 
      List<ErrorMessage> errorMesages = new ArrayList<ErrorMessage>(); 
      for (FieldError objectError : allErrors) { 
       errorMesages.add(new ErrorMessage(objectError.getField(), objectError.getField() + " " + objectError.getDefaultMessage())); 
      } 
      res.setErrorMessageList(errorMesages); 

     } 
     certificateService.save(certificate); 
     return res; 
    } 

Formular

<form method="post" th:object="${certificate}" 
     th:action="@{${action1}}" modelAttribute="employee" class="form-inline inline new-item editCert"> 
    <input type="hidden" th:field="*{id}"/> 
    <div th:replace="common/layout :: flash"></div> 
    <div class="error" ></div> 
    <fieldset> 
     <legend th:text="${heading}"> Personal Information</legend> 
     <div class="row" th:classappend="${#fields.hasErrors('fullName')}? 'error' : ''"> 
      <input type="text" id="fullName" class="form-control input-sm" th:field="*{fullName}" 
        placeholder="Full Name example Jane Doe"/> 
      <div class="error-message" th:if="${#fields.hasErrors('fullName')}" th:errors="*{fullName}"></div> 
     </div> 

     <div class="row" th:classappend="${#fields.hasErrors('gender')}? 'error' : ''"> 
      <select th:field="*{gender}" class="form-control input-lg "> 
       <option value="">[Select Gender]</option> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
      </select> 
      <div class="error-message" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}"></div> 
     </div> 

JQuery

var $form = $('.editCert'); 
    var formData = $form.serialize(); 
    $form.on('submit',function(e){ 
     e.preventDefault(); 
     $.ajax(url,{ 
      dataType: 'json', 
      data: data, 
      type: "POST", 
     }).done(function(response){ 
      if(response.status === 'SUCCESS'){ 
       console.log('I am Okay' + response); 
        }else{ 
        console.log('Error'); 
        } 
     }).fail(function(res){ 
      errorInfo = ""; 
       for(i =0 ; i < res.errorMessageList.length ; i++){ 
        errorInfo += "<br>" + (i + 1) +". " + response.errorMessageList[i].code; 
       } 
       $('.error').html("Please correct following errors: " + errorInfo); 
      }); 
    }); 

Fehler

Uncaught TypeError: Cannot read property 'length' of undefined 

Answer 1

Meine Vermutung ist, Sie sind wieder ein JsonResponse Objekt, kein JSON-String-Datei. Versuchen Sie es mit json zu analysieren.

1 weitere Note, verwenden Sie den Fail Rückruf in der falschen Richtung. Es sollte

fail(function(jqXHR, textStatus, errorThrown){ 
    console.log(errorThrown); 
})