회원 검색, 조회
📍 JSON : 자바스크립트 객체 표현법 { “key” : value }
📍 GSON : Google에서 만든 오픈 라이브러리로 JSON 파일을 쉽게 읽고, 만들 수 있는 메소드 제공
<h3>회원 정보 조회(AJAX)</h3>
<p>이메일을 입력 받아 일치하는 회원 정보를 출력</p>
이메일 : <input type="text" id="in1">
<button id="select1">조회</button>
<div id="result1" style="height: 150px;"></div> <!-- 조회 결과 나오는 곳 -->
// 회원 정보 조회 비동기 통신(AJAX)
document.getElementById("select1").addEventListener("click", function(){
const input = document.getElementById("in1");
const div = document.getElementById("result1");
// AJAX 코드 작성(jQuery 방식) -> jQuery 라이브러리 추가되어 있는지 확인
$.ajax({
// /community/member/selectOne
url : "member/selectOne",
data : {"memberEmail" : input.value},
type : "POST",
dataType : "JSON", // dataType : 응답데이터 형식 지정
// -> "JSON"으로 지정 시 자동으로 JS 객체로 변환
success :function(member){
console.log(member); // JS 객체 형태 문자열
// JSON.parse(문자열) : 문자열 -> JS 객체로 변환
// console.log(JSON.parse(member));
// 1) div에 작성된 내용 모두 삭제(기존 내용 삭제)
div.innerText = "";
if(member != null){ // 회원 정보 존재 O
// 2) ul 요소 생성
const ul = document.createElement("ul");
// 3) li 요소 생성 * 5 + 내용 추가
const li1 = document.createElement("li");
li1.innerText = "이메일 : " + member.memberEmail;
const li2 = document.createElement("li");
li2.innerText = "닉네임 : " + member.memberNickname;
const li3 = document.createElement("li");
li3.innerText = "전화번호 : " + member.memberTel;
const li4 = document.createElement("li");
li4.innerText = "주소 : " + member.memberAddress;
const li5 = document.createElement("li");
li5.innerText = "가입일 : " + member.enrollDate;
// 4) ul에 li를 순서대로 추가
ul.append(li1, li2, li3, li4, li5);
// 5) div에 ul 추가
div.append(ul);
} else { // 회원 정보 존재 X
// 1) h4 요소 생성
const h4 = document.createElement("h4");
// 2) 내용 추가
h4.innerHTML="일치하는 회원이 없습니다."
// 3) 색 추가
// h4.setAttribute("style", "color:red");
h4.style.color="red";
// 4) div 추가
div.append(h4);
}
},
error : function(request, status, error){
console.log("AJAX 에러 발생");
console.log("상태코드 : " + request.status); // 404, 500
console.log(request.responseText); // 에러 메세지
console.log(error); // 에러 객체 출력
}
});
});package edu.kh.community.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
import com.google.gson.Gson;
import edu.kh.community.member.model.service.MemberService;
import edu.kh.community.member.model.vo.Member;
@WebServlet("/member/selectOne")
public class SelectOneServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 파라미터 얻어오기
String memberEmail = req.getParameter("memberEmail");
try {
MemberService service = new MemberService();
// 회원 정보 조회 service
Member member = service.selectOne(memberEmail);
// 조회 결과를 응답용 스트립으로 출력
// resp.getWriter().print(member);
// print 매개변수로 참조형 변수가 작성되면
// 해당 참조형 변수에 toString() 메소드를 자동 호출해서 출력
// *** Java 객체를 Javascript 객체로 변환하여 응답(출력) ***
// Java 객체 -> Javascript 객체 형태의 문자열(JSON) -> Javascript 객체
// 1) JSON 직접 작성 -> 오타 가능성 높음
// String str = "{\"memberNickname\" : \""+ member.getMemberNickname() +"\"}";
// resp.getWriter().print(str);
// 2) JSON-Simple 라이브러리에서 제공하는 JSONObject 사용
/*
if(member != null) {
JSONObject obj = new JSONObject(); // MAP 형식의 객체
obj.put("memberEmail", member.getMemberEmail());
obj.put("memberNickname", member.getMemberNickname());
obj.put("memberTel", member.getMemberTel());
obj.put("memberAddress", member.getMemberAddress());
obj.put("enrollDate", member.getEnrollDate());
// JSONObject의 toString() 메소드는
// JSON 형태로 출력될 수 있도록 오버라이딩 되어 있다.
resp.getWriter().print(obj.toString());
} else {
resp.getWriter().print(member); // null
}
*/
// 3) GSON 라이브러리를 이용한 Java 객체 -> JSON 변환
// new GSON().toJson(객체, 응답스트림);
// -> 매개변수에 작성된 객체를 JSON 형태로 변환 후 스트림을 통해서 출력
new Gson().toJson(member, resp.getWriter());
} catch (Exception e) {
e.printStackTrace();
}
}
}
/** 회원 정보 조회 Service
* @param memberEmail
* @return member
* @throws Exception
*/
public Member selectOne(String memberEmail) throws Exception {
Connection conn = getConnection();
Member member = dao.selectOne(conn, memberEmail);
close(conn);
return member;
}/** 회원 정보 조회 DAO
* @param conn
* @param memberEmail
* @return member
* @throws Exception
*/
public Member selectOne(Connection conn, String memberEmail) throws Exception {
Member member = null;
try {
String sql = prop.getProperty("selectOne");
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, memberEmail);
rs = pstmt.executeQuery();
if(rs.next()) {
member = new Member();
member.setMemberEmail(rs.getString(1));
member.setMemberNickname(rs.getString(2));
member.setMemberTel(rs.getString(3));
member.setMemberAddress(rs.getString(4));
member.setEnrollDate(rs.getString(5));
}
} finally {
close(rs);
close(pstmt);
}
return member;
}
<!-- 회원 정보 조회 -->
<entry key="selectOne">
SELECT MEMBER_EMAIL, MEMBER_NICK, MEMBER_TEL, MEMBER_ADDR,
TO_CHAR(ENROLL_DT, 'YYYY"년" MM "월" DD"일"') AS ENROLL_DATE FROM MEMBER
WHERE MEMBER_EMAIL = ?
AND SECESSION_FL='N'
</entry>
개발 일지