...
<section class="content">
<section class="content-1">
<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
// /community/index.jsp
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.innerText = "일치하는 회원이 없습니다.";
// 3) 색 추가
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 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>
존재하는 회원의 이메일을 입력했을 때
존재하지 않는 회원의 이메일을 입력했을 때