[JAVA, JSP] AJAX를 사용하여 JSON 데이터를 주고받기

1. 개요

• api통신으로 받아온 데이터를 ajax를 이용하여 비동기 방식으로 받아와 사용하고 싶음
• 사용하는 언어는 java, jsp

2. java에서 json 데이터 다루기

-- 예시
testjsonObj = {
    "key1" : "val1",
    "key2" : [1, 2, 3],
    "key3" : {"obj1" : "objval1"},
    "key4" : [
        {"sub1" : "subval1"},
        {"sub2" : "subval2"}
        ]
}

• 참고로, {} 안에 담겨있으면 JSONObject 형이고
• [] 안에 담겨있으면 JSONArray 형이다
• json 데이터형에 대한 포스팅 :

2.1. jsonObject, jsonArray에 담아서 값 사용하기

// 1. JSONObject 안에 있는 JSONObject 추출
JSONObject  jsonobj1 = (JSONObject)testjsonObj.get("key3");


// 2. JSONObject 안에 있는 JSONArray 추출
JSONArray  jsonarr1 = (JSONArray)testjsonObj.get("key4");


// 3. JSONArray 안에 있는 데이터 다루기

// 3-1. JSONArray안에 있는 JSONObject를 임시 JSONObject 객체에 담아 값 추출
for(int  i=0; i<jsonarr1.size(); i++){
    JSONObject  tempjobj = (JSONObject)jsonarr1.get(i); // {"sub1" : "subval1"}
    String  var1 = tempjobj.get("sub1").toString(); // subval1
}

• 1,2 번 예시에서 강제 형변환 해주는 이유
• testjsonObj.get("key3") 여기까지만 하면 값을 Object형으로 가져온다
• 추가로 JSONObject형의 데이터임을 명시해주어야 함

2.2. jsonObject, jsonArray null 체크하기

// jsonObject null 체크
if(jsonobj1 != null){~}

// jsonArray null 체크
if(jsonarr1.size() != 0){~}

// 공통
if(jsonobj1.isempty()){~} // 비어있으면 true, 아니면 false

2.3. jsonObject, jsonArray 데이터 jsp로 보내기

// Map형 데이터에 json 데이터들을 담고, 이를 다시 json String 형태로 변환하여 사용
Map<String, Object> returnMap = new  Hashmap<String, Object>();
ArrayList<HashMap<String, Object>> mapList = new  ArrayList<HashMap<String, Object>>();
...

mapList.add(map); // map : HashMap<String, Object>형 데이터

...

returnMap.put("list", mapList);
sendResponse(request, response, JSONObject.toJSONString(returnMap));

3. jsp에서 json 데이터 다루기

• ajax로 요청하고 String 형으로 넘어온 데이터를 json 형으로 변환하여 다뤄보자

$.ajax({
    async: false,
    url: "<c:url  value='~.do'>",
    type: "POST",
    dataType: "json",
    data: {
        param1 : param1_val,
        param2 : param2_val
        ...
        },
    success: function(json){
        var jsonObj = eval(json);
        jsonObj.key값;
    }
});

• 그러나 eval을 지양하는게 좋다는 의견이 많아서 다른 방법도 알아보자

3.1. String타입으로 받아 사용하기

$.ajax({
    async: false,
    url: "<c:url  value='~.do'>",
    type: "POST",
    dataType: "json",
    data: {
        ...
        },
    success: function(json){
        var jsonstr = json; // [object object]
        JSON.stringify(jsonstr); // {"key1" : "val1"}
        alert(jsonstr.key1); // val1


        // if json data -> {"list" : [
        // {"name1" : "cindy"}, {"name2" : "david"}
        // ]}
        alert(jsonstr.list[0].name1); // cindy

        const obj = JSON.parse(jsonstr);
        alert(obj.key1); // var1

}

• JSON.stringify() : JavaScript 값이나 객체를 JSON 문자열로 반환
• JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성
• jsonArray형이면 jsonList[i] 이렇게 조회하고
• jsonObject형이면 jsonObj.key값 이렇게 조회하면 된다