[Spring] Spring에서 Ajax 사용하기 3 - JSON과 GSON(조회 요청 후 조회된 한 회원의 객체를 응답 받아서 출력해 보기)

 

 

 

1️⃣ DB로부터의 조회 없이 데이터의 흐름만 살펴보기(JSON)

👉🏻 내가 일일이 필드명을 키값으로 지정해 데이터를 넣어 줘야 하는 JSON

👉🏻 내가 여러 개의 데이터를 보내더라도 하나의 문자열로 보임

 

💻 콘솔에 출력할 용도의 index.jsp

	<h3>2. 조회 요청 후 조회된 한 회원의 객체를 응답 받아서 출력해 보기</h3>
	조회할 회원번호: <input type="number" id="userNo">
	<button id="btn">조회</button>
	<br>
	<div id="result2"></div>
	
	<script>
		$(function() {
			
			$("#btn").click(function() {
				
				var userNo = $("#userNo").val();
				
				$.ajax({
					url : "ajax2.do",
					data : {userNo : userNo},
					success : function(result) {
						
						console.log(result);
						
					},
					error : function() {
						console.log("ajax 통신 실패!");
					}
				});
			});
		});
	</script>

 

💻 Member 클래스 생성

package com.kh.ajax.model.vo;

public class Member {
	
	private String userId;
	private String userPwd;
	private String userName;
	private int age;
	private String phone;
	
	public Member() { }

	public Member(String userId, String userPwd, String userName, int age, String phone) {
		super();
		this.userId = userId;
		this.userPwd = userPwd;
		this.userName = userName;
		this.age = age;
		this.phone = phone;
	}

	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}

	public String getUserPwd() {
		return userPwd;
	}

	public void setUserPwd(String userPwd) {
		this.userPwd = userPwd;
	}

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	@Override
	public String toString() {
		return "Member [userId=" + userId + ", userPwd=" + userPwd + ", userName=" + userName + ", age=" + age
				+ ", phone=" + phone + "]";
	};

}

 

⌨️ AjaxController

	@ResponseBody
	@RequestMapping(value="ajax2.do", produces="application/json; charset=UTF-8")
	public String ajaxMethod2(int userNo) {
		
		// DB로부터 조회했다는 가정 하에 Member 객체 생성하기
		Member m = new Member("user01", "pass01", "홍길동", 20, "01011112222");
		
		// JSON 형태로 만들어서 응답 (내가 일일이 필드명을 키값으로 지정해 줌)
		JSONObject jObj = new JSONObject();
		jObj.put("userId", m.getUserId());
		jObj.put("userName", m.getUserName());
		jObj.put("age", m.getAge());
		jObj.put("phone", m.getPhone());
		
		return jObj.toJSONString();
	}

 

 

💻 결과값에 대한 창을 만들어 준 index.jsp

👉🏻 필드명을 키값으로 해서 직접 가공

<h3>2. 조회 요청 후 조회된 한 회원의 객체를 응답 받아서 출력해 보기</h3>
	조회할 회원번호: <input type="number" id="userNo">
	<button id="btn">조회</button>
	<br>
	<div id="result2"></div>
	
	<script>
		$(function() {
			
			$("#btn").click(function() {
				
				var userNo = $("#userNo").val();
				
				$.ajax({
					url : "ajax2.do",
					data : {userNo : userNo},
					success : function(result) {
						
						// console.log(result);
						var resultStr = "<ul>"
									  +	"<li>이름: " + result.userName + "</li>"
									  +	"<li>아이디: " + result.userId + "</li>"
									  +	"<li>나이: " + result.age + "</li>"
									  +	"<li>휴대폰: " + result.phone + "</li>"
									  + "</ul>";
									  
						$("#result2").html(resultStr);
					},
					error : function() {
						console.log("ajax 통신 실패!");
					}
				});
			});
		});
	</script>

 

 

 

 

👉🏻 키값이 별로 없어서 이렇게 보낼 수 있다고 쳐도 키값이 많아지면?

 

 

 

2️⃣ GSON 사용하기

GSON : Google JSON의 약자
👉🏻 VO 객체를 JSONObject로 가공할 때 내부적으로 필드명을 키값으로 잡아서 가공해 줌

 

 

📖 Maven을 이용하여 GSON 다운로드

 

 

 

💻 AjaxController

	@ResponseBody
	@RequestMapping(value="ajax2.do", produces="application/json; charset=UTF-8")
	public String ajaxMethod2(int userNo) {
		
		// DB로부터 조회했다는 가정 하에 Member 객체 생성하기
		Member m = new Member("user01", "pass01", "홍길동", 20, "01011112222");
	
		Gson gson = new Gson();
		return gson.toJson(m); // {userId : "user01", userName : "홍길동", ...}

	}

콘솔에도 내용 잘 뜸