국비 85 - fetch() POST 방식

fetch() - POST 방식

<h3>이메일을 입력받아 일치하는 회원의 정보를 조회</h3>

                <input type="text" id="inputEmail">
                <button id="btn2">조회</button>
                <ul id="result2">
                </ul>

                <hr>

btn2.addEventListener("click", () => {
    
    // POST 방식 비동기 요청

    // JSON.stirngify() : JS 객체 -> JSON
    // JSON.parse()     : JSON -> JS 객체

    fetch("/selectMember", {
        method  : "POST",
        headers : {"Content-Type" : "application/json"},
        body    : JSON.stringify({"email" : inputEmail.value})
    })

    .then(resp => resp.json()) // 응답 객체를 매개변수로 얻어 와 파싱

    .then(member => { // 파싱한 데이터를 이용해서 비동기 처리 후 동작
        console.log(member);

        // ul(#result2)의 내부 내용 모두 없애기
        result2.innerText = "";

        const li1 = document.createElement("li");
        li1.innerText = `회원번호 : ${member.memberNo}`;  // 홑따옴표 아님

        const li2 = document.createElement("li");
        li2.innerText = `이메일 : ${member.memberEmail}`; 

        const li3 = document.createElement("li");
        li3.innerText = `닉네임 : ${member.memberNickname}`; 

        const li4 = document.createElement("li");
        li4.innerText = `전화번호 : ${member.memberTel}`; 

        const li5 = document.createElement("li");
        li5.innerText = `주소 : ${member.memberAddress}`; 

        const li6 = document.createElement("li");
        li6.innerText = `가입일 : ${member.enrollDate}`; 

        result2.append(li1);
        result2.append(li2);
        result2.append(li3);
        result2.append(li4);
        result2.append(li5);
        result2.append(li6);
    }) 

    .catch(err => {
        console.log(err);
        result2.innerText = "일치하는 회원이 없습니다.";
    });
});

---

Controller

🔑 Map으로 매개변수 받아옴 !!

// 이메일로 회원 정보 조회
	@PostMapping(value="/selectMember", produces = "application/json; charset=UTF-8")
	@ResponseBody // 이거 안 쓰면 ViewResolver가 prefix, suffix 사용해서 forward함
	// JAVA 데이터 -> JSON, TEXT로 변환 + 비동기 요청한 곳으로 응답
	public Member selectMember(@RequestBody Map<String, Object> paramMap) {
		
		// requestBody Map<String, Object> paramMap
		// 요청된 HTTP Body에 담긴 모든 데이터를 Map으로 반환
		
		String email = (String)paramMap.get("email");
		
		return service.selectMember(email);
	}
    

Service

/** 이메일로 회원 정보 조회
	 * @param email
	 * @return member
	 */
	Member selectMember(String email);

ServiceImpl

// 이메일로 회원 정보 조회
	@Override
	public Member selectMember(String email) {
		return dao.selectMember(email);
	}

DAO

/** 이메일로 회원 정보 조회
	 * @param email
	 * @return member
	 */
	public Member selectMember(String email) {
		return splSession.selectOne("ajaxMapper.selectMember", email);
	}

sql

<!-- 이메일로 회원 정보 조회 -->
	<select id="selectMember" resultMap="member_rm">
		SELECT MEMBER_NO, MEMBER_EMAIL, MEMBER_NICKNAME, MEMBER_TEL, 
		        NVL(MEMBER_ADDR, '미작성') MEMBER_ADDR, 
		        TO_CHAR(ENROLL_DATE, 'YYYY"년" MM"월" DD"일" HH24"시" MI"분" SS"초"') ENROLL_DATE
		FROM MEMBER
		WHERE MEMBER_EMAIL = #{email}
		AND MEMBER_DEL_FL = 'N'
	</select>

---