JSP

[JSP]Server에서 Client로 JSON데이터 전송하기

siyuning 2022. 7. 7. 10:55

🧐JSON? Server와 Client는 JSON을 통해서 통신하는데, JSON은 객체와 배열을 그대로 전달할 수 있다.

Server에서 JSON형태로 Client에 데이터를 전송할 수 있다. 예제를 통해 살펴보도록 하자 !
[ex] JS내장객체 Object객체의 keys메서드

[ex] 주석처리부분을 loop문으로 변경하기

- t1.jsp
<script>
let list={"member_list":[]};
window.onload=function(){
    document.querySelector("#addButton").onclick=addFunc;
}
function addFunc(){
    let obj={"id":"","pw":"","addr":"","tel":""};
    /*
    obj["id"]=document.querySelector("#id").value;
    obj["pw"]=document.querySelector("#pw").value;
    obj["addr"]=document.querySelector("#addr").value;
    obj["tel"]=document.querySelector("#tel").value;
    */
    list["member_list"].push(obj);
    document.querySelector("#data").innerHTML=JSON.stringify(list);
}
function send(){
    document.forms["f"].elements["data"].value=JSON.stringify(list);
    document.forms["f"].submit();
}
</script>
    <input type="text" id="id" />
    <input type="text" id="pw" />
    <input type="text" id="addr" />
    <input type="text" id="tel" />
    <input type="button" value="추가" id="addButton"/>
    <div id="data"></div>
<form action="t2.jsp" name="f">
    <input type="hidden" name="data" />
    <input type="button" value="전송" onclick="send()"/>
</form>    
- t2.jsp
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<% 
String str=request.getParameter("data");
JSONObject json1=JSONObject.fromObject(str);
JSONArray array=json1.getJSONArray("member_list");  
for(Object obj : array){
    JSONObject json=(JSONObject)obj;
    Member dto=(Member)JSONObject.toBean(json,Member.class);
    out.print(dto.getId()+"<br/>");
}
%>

[an]
- t1.jsp
function addFunc(){
    let obj={"id":"","pw":"","addr":"","tel":""};
    Object.keys(obj).forEach(
        key => obj[key]=document.querySelector("#"+key).value
    );
    list["member_list"].push(obj);
    document.querySelector("#data").innerHTML=JSON.stringify(list);
    Object.keys(obj).forEach(
        key => document.querySelector("#"+key).value="" 
/*추가 버튼 눌렀을 때 txt안의 내용지우기*/
    );
}
🧚‍♀️
Object.keys() : 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.
forEach() : 주어진 함수를 배열 요소 각각에 대해 실행한다.
[ex] http://localhost:8282/project4/t3.jsp
위와 같이 실행하면 아래와 같이 출력된다.
{"aa":"bb","cc":[10,20]}

자바스크립트로 JSON데이터를 받은뒤 화면에 
bb 20이 각각 출력되게 하려면?

- t3.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%
Map<String,Object> map=new HashMap<>();
map.put("aa","bb");
map.put("cc",new int[]{10,20});
JSONObject json=JSONObject.fromObject(map);
out.print(json);
%>

<script>
let data=<%=json%>;
document.write(data["aa"]+"<br/>");
document.write(data["cc"][1]+"<br/>");
</script>

[ex] 주석처리부분을 서버에서 받아와 처리하려면?

- t1.jsp
function addFunc(){
    /* let obj={"id":"","pw":"","addr":"","tel":""}; */
    Object.keys(obj).forEach(
        key => obj[key]=document.querySelector("#"+key).value
    );
    list["member_list"].push(obj);
    document.querySelector("#data").innerHTML=JSON.stringify(list);
    Object.keys(obj).forEach(
        key => document.querySelector("#"+key).value=""
    );
}

[an]
- t1.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%
Map<String,Object> map=new HashMap<>();
map.put("member",new Member());
JSONObject json=JSONObject.fromObject(map);
%>

<script>    
...
let obj=<%=json%>.member;  // let obj=<%=json.get("member")%>;
...
</script>

💛회원 1명 정보 출력

[ex] http://localhost:8282/project4/t4.jsp?id=abc
위와 같이 요청했을때 아래와 같이 출력되려면?
{"member":{"addr":"addr5","id":"id5","pw":"pw5","tel":"tel5"}}

[an]
- t4.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
Member dto=dao.selectMember(request.getParameter("id"));
Map<String,Object> map=new HashMap<>();
map.put("member",dto);
JSONObject json=JSONObject.fromObject(map);
out.print(json);
%>
[ex] 위 소스코드에서 회원정보를 script태그에서 출력하려면?

[an]
- t4.jsp
<script>
let data=<%=json%>;
document.write("ID : "+data.member.id+"<br/>");
document.write("PW : "+data.member.pw+"<br/>");
document.write("ADDR : "+data.member.addr+"<br/>");
document.write("TEL : "+data.member.tel+"<br/>");
</script>
[ex] http://localhost:8282/project4/t4.jsp?id=abc
위와 같이 요청했을때 텍스트에 회원정보를 출력하려면?
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
Member dto=dao.selectMember(request.getParameter("id"));
Map<String,Object> map=new HashMap<>();
map.put("member",dto);
JSONObject json=JSONObject.fromObject(map);
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
ID : <input type="text" /><br/>
PW : <input type="text" /><br/>
ADDR : <input type="text" /><br/>
TEL : <input type="text" /><br/>
</body>
</html> 

[an]
<script>
window.onload=function(){
    let data=<%=json%>.member; 
    document.querySelector("#id").value=data["id"];
    document.querySelector("#pw").value=data["pw"];
    document.querySelector("#addr").value=data["addr"];
    document.querySelector("#tel").value=data["tel"];
}
</script>
ID : <input type="text" id="id"/><br/>
PW : <input type="text"  id="pw"/><br/>
ADDR : <input type="text"  id="addr"/><br/>
TEL : <input type="text"  id="tel"/><br/>

💛람다식 → 무명함수

[ex] http://localhost:8282/project4/t5.jsp?id=abc
다음 문장에서 람다식을 무명함수로 바꾸기

<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
Member dto=dao.selectMember(request.getParameter("id"));
Map<String,Object> map=new HashMap<>();
map.put("member",dto);
JSONObject json=JSONObject.fromObject(map);
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload=function(){
    let data=<%=json%>.member; 
    Object.keys(data).forEach(
        key => document.querySelector("#"+value=data[key]
    );
}
</script>
</head>
<body>
ID : <input type="text" id="id"/><br/>
PW : <input type="text"  id="pw"/><br/>
ADDR : <input type="text"  id="addr"/><br/>
TEL : <input type="text"  id="tel"/><br/>
</body>
</html>

[an]
- t5.jsp
<script>
window.onload=function(){
    let data=<%=json%>.member; 
    Object.keys(data).forEach(
            function(key){
                document.querySelector("#"+key).value=data[key];
            }
    );
}
</script>

💛회원 list 출력

[ex] http://localhost:8282/project4/t6.jsp
위와 같이 요청했을때 아래와 같이 출력되려면?
{"list":[
    {"addr":"addr1","id":"id1","pw":"pw1","tel":"tel1"},
    {"addr":"addr2","id":"id2","pw":"pw2","tel":"tel2"},
    {"addr":"addr5","id":"id5","pw":"pw5","tel":"tel5"}
}
[an]
- t6.jsp
<%@page import="java.util.List"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
List<Member> list=dao.selectMemberList();
Map<String,Object> map=new HashMap<>();
map.put("list",list);
JSONObject json=JSONObject.fromObject(map);
out.print(json);
%>

💛회원 list, member 출력

[ex] http://localhost:8282/project4/t7.jsp?id=id5
위와 같이 요청했을때 아래와 같이 출력되려면?
{
    "list":[
    {"addr":"addr1","id":"id1","pw":"pw1","tel":"tel1"},
    {"addr":"addr2","id":"id2","pw":"pw2","tel":"tel2"},
    {"addr":"addr5","id":"id5","pw":"pw5","tel":"tel5"}
    ], 
    "member" : {"addr":"addr5","id":"id5","pw":"pw5","tel":"tel5"}
}

[an]
- t7.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="java.util.List"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
List<Member> list=dao.selectMemberList();
Member member=dao.selectMember(request.getParameter("id"));
Map<String,Object> map=new HashMap<>();
map.put("list",list);
map.put("member",member);
JSONObject json=JSONObject.fromObject(map);
out.print(json);
%>

💛회원 ID만 출력

[ex] 위 소스코드에서 script태그에서 회원의 ID만 모두 출력하는 문장 작성하기

[an]
- t8.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="kr.co.seoulit.member.dto.Member"%>
<%@page import="java.util.List"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAO"%>
<%@page import="kr.co.seoulit.member.dao.MemberDAOImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
List<Member> list=dao.selectMemberList();
Map<String,Object> map=new HashMap<>();
map.put("list",list);
JSONObject json=JSONObject.fromObject(map);
%>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
let data=<%=json%>;
data.list.forEach(
        member => document.write(member.id+"<br/>")
);
</script>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)