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

2021. 4. 7. 20:48· FE/Javascript
반응형

안녕하세요.

 

이번 포스팅에서는 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>

 

 

 

반응형

'FE > Javascript' 카테고리의 다른 글

[오류 해결]SCRIPT87:잘못된 인수입니다.  (0) 2021.05.14
[Javascript] 팝업 열기 및 크기 조절  (0) 2021.05.13
[Javascript] 날짜 가져오기  (0) 2021.03.30
[Javascript] String to Int / Int to String 타입 변환  (0) 2021.02.18
[JavaScript] html 요소 보이기 / 숨기기  (0) 2021.02.15
'FE/Javascript' 카테고리의 다른 글
  • [오류 해결]SCRIPT87:잘못된 인수입니다.
  • [Javascript] 팝업 열기 및 크기 조절
  • [Javascript] 날짜 가져오기
  • [Javascript] String to Int / Int to String 타입 변환
멍목
멍목
개발 관련 새롭게 알게 된 지식이나 좋은 정보들을 메모하는 공간입니다.
반응형
멍목
김멍목의 개발블로그
멍목
전체
오늘
어제
  • 분류 전체보기 (514)
    • BE (190)
      • Spring (21)
      • Java (141)
      • Kotlin (6)
      • JPA (22)
    • FE (33)
      • Javascript (16)
      • Typescript (0)
      • React (5)
      • Vue.js (9)
      • JSP & JSTL (3)
    • DB (32)
      • Oracle (22)
      • MongoDB (10)
    • Algorithm (195)
    • Linux (8)
    • Git (6)
    • etc (42)
    • ---------------------------.. (0)
    • 회계 (4)
      • 전산회계 2급 (4)
    • 잡동사니 (2)

블로그 메뉴

  • 홈
  • 관리

공지사항

인기 글

태그

  • 전산회계 2급 준비
  • 더 자바 애플리케이션을 테스트하는 다양한 방법
  • MongoDB with Node.js
  • 코테 공부
  • 알고리즘 공부
  • MongoDB 공부
  • JPA 공부
  • 이펙티브자바
  • Oracle
  • junit5
  • 이펙티브 자바
  • MongoDB 기초부터 실무까지
  • 자바 공부
  • 자기 공부
  • 자바 개발자를 위한 코틀린 입문
  • 자기 개발
  • 코테공부
  • 자기개발
  • vue3 공부
  • Java to Kotlin
  • 더 자바 Java 8
  • 자기공부
  • 자바 테스팅 프레임워크
  • Effective Java
  • JPA
  • java 8
  • 알고리즘공부
  • 자바공부
  • 프로젝트로 배우는 Vue.js 3
  • 코틀린

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.0
멍목
[Javascript] JSON Array 타입 데이터 JAVA 통신 방법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.