Spring 06. 회원정보 조회

 

// main.jsp

<div class="content">
    <div class="content-1">
       <h3>회원 정보 조회</h3>
       <p>아이디를 입력 받아 일치하는 회원 정보를 출력</p>
       아이디 : <input type="text" id="in1">
       <button id="select1">조회</button>
       <div id="result1" style="height:150px"></div>
    </div>
</div>


// 순수 JS코드로 작성해보았다.
<script>
    document.getElementById("select1").addEventListener("click", function () {
    
        const in1 = document.getElementById("in1");
        const result1 = document.getElementById("result1");

        $.ajax({
            url : 'selectOne',
            data : {userId : in1.value},
            type : 'POST',
            success : function ({userInfo}) {
                // result =>  {userId : ??, userName : ??}

                result1.innerHTML = "";
                let result = userInfo;

                if(result.userId){
                    // 1) ul요소 생성
                    const ul = document.createElement("ul");

                    // 2) li요소 생성
                    const li1 = document.createElement("li");
                    li1.innerText = "아이디 : " + result.userId;

                    const li2 = document.createElement("li");
                    li2.innerText = "이름 : " + result.userName;

                    const li3 = document.createElement("li");
                    li3.innerText = "이메일 : " + result.email;

                    const li4 = document.createElement("li");
                    li4.innerText = "생일 : " + result.birthday;


                    // 3) ul에 li추가
                    ul.append(li1, li2, li3, li4);

                    // 4) ul을 div에 추가
                    result1.append(ul);
                }
            }
        })
    })	

</script>

 

@Controller
public class MemberController {

	@PostMapping("/selectOne")
	public ResponseEntity<Map<String, Object>> selectOne(String userId) {
		
		Member m = mService.loginMember(userId);
		HashMap<String, Object> map = new HashMap();
		
		ResponseEntity res = null;
		
		if(m != null) {
			map.put("userId", m.getUserId());
			map.put("userName", m.getUserName());
			map.put("email", m.getEmail());
			map.put("birthday", m.getBirthday());
			
			res = ResponseEntity
					.ok().header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_UTF8_VALUE)
					.body(map);
		}else {
			res = ResponseEntity
					.notFound()
					.build();
		}
		return res;
	}
}