[Javascript] JSON Array 타입 데이터 JAVA 통신 방법

안녕하세요.

 

이번 포스팅에서는 javascript에서 자주 사용하는 JSONArray 타입의 데이터를 JAVA와 통신하는 방법에 대해서 알아보겠습니다.

 

아래 예제를 통해서 쉽게 이해하도록 해보겠습니다.

 

---

JSON관련 라이브러리는 다양하지만, 이번 포스팅에서 다룰 건 아래와 같습니다.

1. net.sf.json.* 라이브러리

2. org.json.simple.* 라이브러리

 

목차 

1. net.sf.json.* 라이브러리

 1-1. Javascript단에서의 JSONArray 보내기

 1-2. JAVA 단에서 JSONArray를 받고 Javascript로 JSONArray를 보내기

   1-2-1. net.sf.json.* 라이브러리를 사용하는 경우

   1-2-2. org.json.simple.* 라이브러리를 사용하는 경우

 1-3. JAVA에서 보낸 JSONArray를 Javascript에서 받기

 

1. net.sf.json.* 라이브러리

1-1. Javascript 단에서의 JSONArray 보내기

<script language="javascript" >

// jsonArr 데이터 생성 
var jsonArr = [{"name":"AAA", "addr":"Seoul"}, {"name":"BBB", "addr":"Busan"}];	

// Json타입의 데이터를 JSON.stringify() 를 이용해 문자열로 변환 후 폼의 요소에 저장
$("#jsonEle").val(JSON.stringify(jsonArr));

var frm = document.frm;
frm.submit();	// 전송
                    
<script language="javascript">

...

<form id="frm"  action="example.do">
  <input type = "hidden" id="jsonEle" name="jsonEle">
</form>

1-2. JAVA단에서 JSONArray를 받고 다시 Javascript로 보내주기

1-2-1. net.sf.json.* 라이브러리를 사용하는 경우

import net.sf.json.*;

@RequestMapping("sample.do")
public void sample(HttpServletRequest request) throws Exception{
	
    /**** JSONArray 받는 방법 ****/
    // request로 문자열형식의 데이터를 받고
    String jsonStr = request.getParameter("jsonEle");
    
    JSONArray jsonArr = new JSONArray();
    
    // 문자열 형식의 데이터를 JSONArray로 가공
    jsonArr =  JSONArray.fromObject(jsonStr);
    
	// 데이터의 길이만큼 반복 및 JSONObject로 변환하며 확인
    for(int i=0;i<jsonArr.size();i++){
    	JSONObject jsonObj = jsonArr.getJSONObject(i);
        System.out.println("id : "+jsonObj.get("id")+", addr"+jsonObj.get("addr"));
    }
    
    
    /**** JSONArray 보내는 방법 ****/
    
    // 변수에 "가 들어가는 경우 제대로 통신되지 않아 '로 치환하여 저장
    request.setAttribute("jsonEle", jsonStr.replaceAll("\"","\'"));
    
    
    ...		// 아래 페이지로 이동시킴(생략)
}

 

1-2-2. org.json.simple.* 라이브러리를 사용하는 경우

import org.json.simple.*;

@RequestMapping("sample.do")
public void sample(HttpServletRequest request) throws Exception{
	
    /**** JSONArray 받는 방법 ****/
    // request로 문자열형식의 데이터를 받고
    String jsonStr = request.getParameter("jsonEle");
    
    JSONArray jsonArr = new JSONArray();
    JSONParser parser = new JSONParser();
    
    // 문자열 형식의 데이터를 JSONArray로 가공
    jsonArr = (JSONArray)parser.parse(jsonStr);
    
	// 데이터의 길이만큼 반복 및 JSONObject로 변환하며 확인
    for(int i=0;i<jsonArr.size();i++){
    	JSONObject jsonObj = jsonArr.getJSONObject(i);
        System.out.println("id : "+jsonObj.get("id")+", addr"+jsonObj.get("addr"));
    }
    
    
    /**** JSONArray 보내는 방법 ****/
    
    // 변수에 "가 들어가는 경우 제대로 통신되지 않아 '로 치환하여 저장
    request.setAttribute("jsonEle", jsonStr.replaceAll("\"","\'"));
    
    
    ...		// 아래 페이지로 이동시킴(생략)
}

 

 

 

1-3. Javascript에서 JSONArray를 받기

<script language="javascript" >

// java단에서 "를 '로 바꿨기때문에 다시 '를 "로 치환
$("#jsonEle").val($("#jsonEle").val().replaceAll("\'", "\""));
var jsonStr = $("#jsonEle").val();

// String의 데이터를 JSONArray로 변환
var jsonArr =JSON.parse(columnArrStr);

console.log(jsonArr);		// 정상 출력
                    
<script language="javascript">

...

<form id="frm"  action="example.do">
  <input type = "hidden" id="jsonEle" name="jsonEle" value=<%= request.getAttribute("jsonEle") %>
</form>