코딩하는 문과생

[Web] 8. Json 통신 본문

웹 프로그래밍/Web

[Web] 8. Json 통신

코딩하는 문과생 2020. 1. 31. 15:36

[Preview]

ajax 통신

[TEST파일 - default 패키지, JsonMain 클래스 생성]

서버쪽에서 받을 수 있는 유형: VO, List, Map
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONObject;

import com.sinc.intern.insa.model.vo.UserVO;

public class JsonMain {

	public static void main(String[] args) {
		//obj();
		//list();
		map();
	}
	public static void obj() {
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		JSONObject jobj = new JSONObject(user);
		System.out.println(jobj.toString());
		//{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
	}
	public static void list() {
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		List<Object> list = new ArrayList<>();
		list.add(user);
		list.add(user);
		list.add(user);
		JSONArray ary = new JSONArray(list);
		System.out.println(ary.toString());
		//[{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}]
	}
	public static void map() {
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		Map<String, Collection> map = new HashMap<>();
		List<Object> list01 = new ArrayList<>();
		list01.add(user);
		list01.add(user);
		list01.add(user);
		
		List<Object> list02 = new ArrayList<>();
		list02.add(user);
		list02.add(user);
		list02.add(user);
		
		map.put("list01", list01);
		map.put("list02", list02);
		JSONObject jobj = new JSONObject(map);
		System.out.println(jobj.toString());
		//{"list01":[{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//			,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//			,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}],
		//"list02":[{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//			,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}
		//			,{"name":"이시준","id":"sijune","dept":"EMART","pwd":"sijune","point":1000}]}
		
		
		
	}

}

[Test파일 - script.jsp]

 jQuery이용해서 json 파일 document에 삽입
<%@ 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>
</head>
<body>
	
	<button id="btn">script event</button>
	<button id="clearBtn">script clear</button>
	<div id="result">
		
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		var obj = { id : 'sijune', pwd:'sijune'};
		
		var ary = [{ id : 'sijune1', pwd:'sijune'},{ id : 'sijune2', pwd:'sijune'}];
	
		var map = {
				"list01" : [{ id : 'sijune1', pwd:'sijune'},{ id : 'sijune2', pwd:'sijune'}],
				"list02" : [{ id : 'sijune1', pwd:'sijune'},{ id : 'sijune2', pwd:'sijune'}]
		}
		
		function printAry(aryData){
			$.each(aryData, function(idx, data) {
				$('#result').append("<font color='red'>" + data.id + "</font>, " + data.pwd + "<br/>" );
			}) ;
		}
		
		//document.ready~: 페이지가 다 로드되고 난 이후에 실행되게 해준다.
		$(document).ready(function() {
			$('#btn').click(function() { //선택자 : 선택하는 문법
				
				//1.
				//window.alert("이벤트 확인");
			
				//2.
				// text(), append(), html()를 이용해 document에 데이터를 심을 수 있다.
				//$('#result').text('나는 jj입니다.');
				
				//3.
				//$('#result').text("<font color='red'>" + obj.id + "</font>, " + obj.pwd );
				//출력: <font color='red'>sijune</font>, sijune
				//$('#result').html("<font color='red'>" + obj.id + "</font>, " + obj.pwd );
				//출력: sijune, sijune
				
				//4.
				//$.each(ary, function(idx, data) {
				//	$('#result').append("<font color='red'>" + data.id + "</font>, " + data.pwd + "<br/>" );
				//	//html로 하면 덮어쓴다.
				//}) ;
				//출력: sijune1, sijune
				//		sijune2, sijune
				
				//5.
				printAry(map.list01);
				printAry(map.list02);
				//출력: sijune1, sijune
				//		sijune2, sijune
				//		sijune1, sijune
				//		sijune2, sijune
			}); 
			$('#clearBtn').bind('click', function() {
				// empty() - 태그는 두고 데이터 지우는 것, remove() - 태그 자체를 삭제 등
				$('#result').empty();
			});
		});
	</script>
</body>
</html>

 

'웹 프로그래밍 > Web' 카테고리의 다른 글

[Web] 10. MVC 패턴 - AJAX 통신(2)  (0) 2020.02.03
[Web] 9. MVC 패턴 - AJAX 통신  (0) 2020.02.03
[Web] 7. MVC 패턴(6) - 세션을 이용한 로그아웃 기능  (0) 2020.01.31
[Web] 6. MVC 패턴(5) - 데이터를 심기 위한 session  (0) 2020.01.31
[Web] 5. MVC 패턴(4) - DB연동  (0) 2020.01.30
'웹 프로그래밍/Web' Related Articles more