Front-End/JSP

JSON이란?

LightSource 2022. 5. 20. 19:44

JSON(JavaScript Object Notation)이란?

  • 데이터를 저장, 전송할 때 사용되는 경량의 DATA 교환 형식
  • javascript에서 객체를 만들 때 사용하는 표현식
  • JSON은 데이터 포맷일 뿐, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법

JSON의 특징

  • 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
  • 자바스크립트 객체표기법과 아주 유사하다.
  • 자료형이 아닌 텍스트의 형식일 뿐이다.
  • JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있다.
  • 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
  • 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어어세 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

JSON 문법

{"member" : [
            {"id":"1a","pw":"2a","addr":"3a","tel":"4a"}, 
            {"id":"1b","pw":"2b","addr":"3b","tel":"4e"}
        ]}
  • JSON 형식은 자바스크립트 객체와 마찬가지로 key / value가 존재하며, 문자열은 항상 쌍따옴표를 이용하여 표기 해야한다.
  • 객체, 배열 등의 표기를 사용할 수 있다.
  • 원하는 만큼 중첩시켜서 사용할 수 있다.
  • JSON 형식에서는 null, number, string, array, object, boolean을 사용할 수 있다.

JSON 메서드

  • JSON.stringify(json) : 제이슨 오브젝트를 스트링형으로 바꿔준다.
<script type="text/javascript">
window.onload=function(){
    const obj={"member":{"id":"aa","pw":"bb","addr":"cc","tel":"dd"}};
    document.querySelector("#txt").value=JSON.stringify(obj);
//JSON object를 쿼리 셀렉터의 value로 전달할때 String 형으로 전달함
}
    </script>
  • JSONObject.fromObject(String) : 스트링형을 JSONObject로 바꿔준다.
  • json객체.getJSONObject(key) : 키값을 넣으면 밸류값으로 JSONObject형태로 받아온다.
  • (Bean객체). JSONObject.toBean(json객체, Bean클래스이름.class) : json객체를 bean형태로 가지고 온다.

멤버 arraylike객체에서 JSONObejct이용해서 원하는 데이터 출력하기

<%
    //{"member":{"id":"aa","pw":"bb","addr":"cc","tel":"dd"}}
    String str =request.getParameter("data"); 
    JSONObject json1=JSONObject.fromObject(str); //스트링값으로 가져온 것을 JSONObject형태로 json1에 할당
    JSONObject json2=json1.getJSONObject("member"); //member의 밸류값을 json2에 할당
    MemberBean bean=(MemberBean)JSONObject.toBean(json2, MemberBean.class);
    // json2의 키와 값을 MemberBean클래스에 할당
    %>

멤버 arraylike객체에서 member객체가 여러개인 경우 원하는 데이터 출력하기

데이터를 보내는 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
    const obj={"list":[]};  //key값list를 가지고 value로 빈 배열을 가지는 obj 객체를 생성
    obj.list.push({"id":"aa1","pw":"bb1","addr":"cc1","tel":"dd1"});  //array.push() 메서드로 멤버의 정보를 list의 value에 추가
    obj.list.push({"id":"aa2","pw":"bb2","addr":"cc2","tel":"dd2"});
    obj.list.push({"id":"aa3","pw":"bb3","addr":"cc3","tel":"dd3"});
    document.querySelector("#txt").value=JSON.stringify(obj);  //
}
</script>
</head>
<body>
<form action="t4.jsp">
<input type="text" name="data" id="txt" />
<button>회원여러명 전송</button>

</form>
</body>
</html>

데이터를 받는 코드 (데이터의 JSONObject중 한개만 출력하는 경우)

<%
    String str=request.getParameter("data"); //겟 파라미터 메서드로 data를 가져온다.
    JSONObject json1=JSONObject.fromObject(str); // String형을 JSONObejct로 바꿔준다
    JSONArray array=json1.getJSONArray("list"); // 자료안에서 list의 값을 추출
    JSONObject json2=array.getJSONObject(0); // list의 배열중 0번쨰 값들을 json2에 할당
    MemberBean bean=(MemberBean)JSONObject.toBean(json2, MemberBean.class);
// MemberBean으로 변환
%>
<%=bean.getId() %>

데이터를 받는 코드(JSONObejct가 몇개일지 모르는 경우)

<%
    String str=request.getParameter("data"); 
    JSONObject json1=JSONObject.fromObject(str);
    JSONArray array=json1.getJSONArray("list");

    List<MemberBean> list=new ArrayList<>();
    for(Object obj: array){
        MemberBean bean=(MemberBean)JSONObject.toBean((JSONObject)obj, MemberBean.class);
        list.add(bean);
    }
%>
<%=list.get(0).getId() %>

 

반응형