Ajax Json Array(json배열) 컨트롤러로 전달하기

 

Ajax에서 JSON배열을 컨트롤러 전송.

Ajax에서 데이터를 컨트롤러로 전송하는 방법중 배열(array) 데이터를 컨트롤러로 보내서 처리해야할 때가 자주 있습니다.

단 일 데이터가 아닌 JSON형태의 그것도 배열이 담겨있다면 컨트롤러에서 데이터를 받을 때 좀 삽질할 수도 있는데 삽질을 최대한 줄여보도록 하겠습니다.

 

데이터 전달하기 (Ajax -> controller)

아래와 같이 여러멤버의 정보가 담겨있는 JSON 배열을 JSON.stringify 을 이용하여 넘겨주시면 됩니다.
배열을 전송할 때는 Ajax 옵션중 "traditional: true" 로 꼭 설정해두고 넘겨야 합니다.

function insertMemberInfo() {

  let getMemberInfo = [
    { memberNo: 1, name: "홍길동1", phone: "010-1111-1111", birth: "2020-01-01" },
    { memberNo: 2, name: "홍길동2", phone: "010-2222-2222", birth: "2020-02-02" },
    { memberNo: 3, name: "홍길동3", phone: "010-3333-3333", birth: "2020-03-03" },
    { memberNo: 4, name: "홍길동4", phone: "010-4444-4444", birth: "2020-04-04" },
    { memberNo: 5, name: "홍길동5", phone: "010-5555-5555", birth: "2020-05-05" },
  ];

   $.ajax({
     method: 'post',
     url: '/mypage/insertMemberInfo',
     traditional: true,
     data: {
       data: JSON.stringify(getMemberInfo)
     },
     dataType: 'json',
     success: function (res) {
        if (res.result) {
          alert("완료 되었습니다");
        }
     }
   });
}

반응형

 

로그를 찍어보면 위와 같이 잘 나옵니다.

 

 

데이터 전달 받기 (controller)

컨트롤러에서는 넘어온 데이터를 String 형으로 받아서 Object인 JSONArray 형태로 변환하여 처리합니다.

이때 방법은 Json 라이브러리와 Gson 라이브러리를 이용한 방법을 사용하면 됩니다.

참고로 아래의 코드는 예제로써 그냥 컨트롤러에 작성하였습니다.

 

JSONArray.fromObject()

홈페이지 : http://json-lib.sourceforge.net/

다운로드 : https://sourceforge.net/projects/json-lib/files/

Maven : https://mvnrepository.com/artifact/net.sf.json-lib/json-lib/2.4

메이븐으로 설치해도 되고, 직접 jar 파일을 다운받아서 import 하면 됩니다.
메이븐 보다는 직접 jar파일을 다운 받는게 더 최신 버전인거 같습니다.

라이브러리 적용 후 import 하시는거 잊지 마세요~(import net.sf.json.JSONArray;)

@RequestMapping(path = "/maypage/insertMemberInfo")
@ResponseBody
public Map<String, Object> insertMemberInfo(@RequestParam String data){

  Map<String, Object> result = new HashMap<>();
  try {
    /*JSONArray jsonArray = JSONArray.fromObject(paramData);*/
    List<Map<String,Object>> info = new ArrayList<Map<String,Object>>();
    info = JSONArray.fromObject(paramData);

    for (Map<String, Object> memberInfo : info) {
        System.out.println(memberInfo.get("memberNo") + " : " + memberInfo.get("name"));
    }  
      result.put("result", true);
  } catch (Exception e) {
      result.put("result", false);
  }
  return result;

}

728x90

Gson

Gson은 JSON구조의 직렬화된 데이터를 JAVA의 객체로 역질렬화, 직렬화 해주는 자바 라이브러리 입니다.
JSON Object -> Java Object 또는 그 반대의 행위를 돕는 라이브러리 입니다.

Maven : https://mvnrepository.com/artifact/com.google.code.gson/gson/2.8.6

메이븐이 가장 최신으로 보입니다. pom.xml에 적용해주세요.

라이브러리 적용 후 import 하시는거 잊지 마세요~

@RequestMapping(path = "/maypage/insertMemberInfo")
@ResponseBody
public Map<String, Object> insertMemberInfo(@RequestParam String data){
  Map<String, Object> result = new HashMap<>();
  try {
      List<Map<String, Object>> info = new Gson().fromJson(String.valueOf(data),
              new TypeToken<List<Map<String, Object>>>(){}.getType());

      for (Map<String, Object> memberInfo : info) {
          System.out.println(memberInfo.get("memberNo") + " : " + memberInfo.get("name"));
      }  
      result.put("result", true);
  } catch (Exception e) {
      result.put("result", false);
  }
  return result; 
}