봄 mvc - Ajax 응답

Question

ajax를 사용하여 서버에 양식을 제출하려고합니다. 다양한 자습서를 살펴 보았지만 내 자신의 오류를 파악할 수 없었습니다. 방금 아약스를 배우기 시작 했으므로 아무 것도 시도하지 않았지만 콘솔에 json 문자열을 보내고 표시했습니다.

@RequestMapping(value="/create/transaction", method=RequestMethod.POST) 
    @ResponseBody 
    public String createTran(@RequestBody String json) throws IOException { 
     LOGGER.info("Create New Transaction"); 
     System.out.println("--- Json: " + json); 
     ObjectMapper mapper = new ObjectMapper(); 
     MyTransaction tranValue = mapper.readValue(json, MyTransaction.class); 

     MyTransaction tran = MyTransaction.getInstance(); 
     tran.setName(tranValue.getName()); 
     tran.setAmount(tranValue.getAmount()); 


     return toJson(tran); 

    } 


    private String toJson(MyTransaction tran) { 
     ObjectMapper mapper = new ObjectMapper(); 
     try { 
      String value = mapper.writeValueAsString(tran); 
      LOGGER.info("---- Value: " + value); 
      return value; 
     } catch(JsonProcessingException e) { 
      LOGGER.debug("----- Fail"); 
      e.printStackTrace(); 
      return null; 
     } 
    } 

내 양식 :

이

내 컨트롤러

<form id="c-t-form" method="post" action="${pageContext.request.contextPath}/create/transaction"> 
<div class="modal-form"> 
    <h3>Create New Transaction</h3> 
    <table class="table-form"> 
     <tr> 
      <td class="c-50"> 
       <label for="c-t-t">Title</label> 
       <span id="c-t-t-error" class="c-t-t-error error">Please enter the budget title.</span> 
       <div class="input-txt"> 
        <input id="c-t-t" class="txt" type="text" name="name"/> 
       </div> 
      </td> 
      <td class="c-10"> 
       <label for="c-t-a">Amount</label> 
       <span id="c-t-a-error" class="c-t-a-error error">Please enter correct budget amount.</span> 
       <div class="input-txt"> 
        <input id="c-t-a" class="txt" type="text" name="amount"/> 
       </div> 
      </td> 

     </tr> 
     <tr> 
      <td> 
       <div> 
        <input class="submit-btn acc-btn" name="t-b" type="submit" value="Save" /> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div> 
</form> 

이 내 아약스 스크립트입니다 :

$(document).ready(function() { 
    $("#c-t-form").submit(function(event) { 
     var tranName = $('#c-t-t').val(); 
     var amount = $('#c-t-a').val(); 

     var data = {"name" : tranName,"amount" : amount}; 
     $.ajax({ 
      url: $('#c-t-form').attr('action'), 
      data: JSON.stringify(data), 
      type: "POST", 
      cache: false, 
      beforeSend:function(xhr) { 
       xhr.setRequestHeader("Accept", "application/json"); 
       xhr.setRequestHeader("Content-Type", "application/json"); 
      }, 

      success: function(reponse) { 
       alert("success"); 
      }, 
      error: function(xhr, status, error) { 
       alert(status); 
      } 
     }); 
     return true; 
    }); 
}); 

내가 코드 몇 시간 만 나오지 않았어에서 봐 내 구현에서 오류를 찾지 못했습니다.

class MyTransaction { 
    private int id; 
    private String name; 
    private String details; 
    private Bigdecimal amount; 

    // getters and setters 
} 

어떤 힌트가 도움이 될 것이다 : 이것은 내가

SEVERE: Servlet.service() for servlet [spring] in context with path [/budgetme] threw exception 
com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'name': was expecting 'null', 'true', 'false' or NaN 
at [Source: name=asda&amount=12&t-d=&t-b=Save; line: 1, column: 5] 

내 모델을 점점 오전 오류입니다. 고맙습니다.

Answer 1

@RequestBody와 @ResponseBody는 json 객체를 Spring이 직접 처리하기를 원할 때 사용됩니다. 귀하의 경우 JSON 객체를 제출하지만 function 매개 변수는 String입니다.

@RequestMapping(value="/create/transaction", method=RequestMethod.POST) 
@ResponseBody 
public MyTransaction createTran(@RequestBody MyTransaction json) throws IOException { 

    ... 
    MyTransaction tran = MyTransaction.getInstance(); 
    ... 
    return tran; 
} 

ObjectMapper 자신을 처리 할 필요가 :

함수는 다음과 같다 없습니다.

당신은 여기에서 예를 볼 수 있습니다이 튜토리얼에서는 http://spring.io/guides/gs/rest-service/

을, 그들은 @Controller 대신 @RestController 사용하고 있습니다. RestController는 모든 함수에서 @ResponseBody를 사용합니다.

봄 문서 : http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-ann-requestbody

감사