JAVA - ajax JSON 데이터 통신하기

AJAX를 통해 비동기로 통신하면서 JSON형태로 데이터를 파싱하는 방법을 알아보겠다.

 

먼저 JSON 파싱을 위해 JSON-LIB을 MAVEN 등록을 해준다.

 

pom.xml

<!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib -->
<dependency>
  <groupId>net.sf.json-lib</groupId>
  <artifactId>json-lib</artifactId>
  <version>2.4</version>
  <classifier>jdk15</classifier>
</dependency>

classifier부분이 없으면 에러가 난다.

 

maven 추가를 하고 간단한 UI를 위한 jsp를 구성한다.

index.jsp

<table>
  <colgroup>
  <col width="">
  <col width="">
  </colgroup>
  <tr>
    <th>일간</th>
    <td><input type="text" value="" id="day"/> <small>(숫자만 입력하세요)</small></td>
  </tr>
  <tr>
    <th>주간</th>
    <td><input type="text" value="" id="week"/> <small>(숫자만 입력하세요)</small></td>
  </tr>
  <tr>
    <th>월간</th>
    <td><input type="text" value="" id="month"/> <small>(숫자만 입력하세요)</small></td>
  </tr>
  <tr>
    <th>연간</th>
    <td><input type="text" value="" id="year"/> <small>(숫자만 입력하세요)</small></td>
  </tr>
</table>
<button id="save">저장</button>

 

저장 버튼을 눌렀을때 동작시킬 스크립트

index.js

//저장
$("#save").click(function(){
  if(confirm("입력하신 데이터를 저장하시겠습니까?")){
    var day = $("#day").val();
    var week = $("#week").val();
    var month = $("#month").val();
    var year = $("#year").val();

    var keyValue = "REPORT";
    var params = [{key : keyValue, keydetail1 : "DAY", value : day},
                {key : keyValue, keydetail1 : "WEEK", value : week},
                {key : keyValue, keydetail1 : "MONTH", value : month},
                {key : keyValue, keydetail1 : "YEAR", value : year}];

    $.ajax({
      url: "/reportSave.do",
      contentType: "application/json; charset=utf-8",
      type: "POST",
      data: JSON.stringify(params),
      dataType: "JSON",
      success: function(args){
        var r = args.res;
        if(r > 0){
        	alert("정상적으로 등록되었습니다.");
        }else{
        	alert("등록하는데 실패하였습니다.");
        }
      },
      error: function(args){
        alert("오류가 발생하였습니다.");
        location.reload();
      }
    });
  }
});

 

스크립트에서 중요하게 봐야할 부분은 ajax 넘기는부분에서 contentType을 지정해주는것이다.

값을 지정해주지 않으면 기본값으로 처리되어 JSON을 넘기더라도 정상적으로 JAVA단에서 처리할수 없다.

"application/json"을 해주고 언어의 인코딩까지 맞춰준다.

 

이후에 data부분에서는 JSON.stringify 메소드를 통해 배열 Object값을 JSON화 시켜준다.

 

JSON화 처리가 된 데이터

 

이제 전달받을 컨트롤러 부분을 구성해보자.

 

Controller.java

@RequestMapping(value="reportSave.do", method=RequestMethod.POST)
public @ResponseBody Map<String, Object> reportSave (final HttpServletRequest request, 
final HttpServletResponse response, @RequestBody String requestData) throws Exception {
  Map<String, Object> res = new HashMap<String, Object>();

  int resValue = 0;
  List<Map<String,Object>> resultMap = JSONArray.fromObject(requestData); // JSON형태로 날라온 데이터를 파싱하여 update진행
  for(Map<String, Object> map : resultMap) {
  	resValue += userService.updateThresholdSetting(map);
  }

  res.put("res", resValue);
  return res;
}

for문 내부에서 update문을 돌리는 서비스를 구성하였는데

해당 부분에서 원하는 형태로 변경해서 사용하면 될 것이다.

 

 

ajax에서 넘기는 데이터는 @RequestBody 어노테이션을 활용하여 reqeustData라는 파라미터값으로 처리하였다.

해당값을 이번에 추가한 라이브러리 net.sf.json.JSONArray를 활용하여 List Map에 파싱을 해준다.

 

import net.sf.json.JSONArray; 라이브러리 사용