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로 가공할 때 내부적으로 필드명을 키값으로 잡아서 가공해 줌
💻 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 : "홍길동", ...}
}