6. 메인페이지 - 비동기 예제

main.html 추가

<section class="content">

  <section class="content-1">
    <!-- 보충 내용.. -->
    <h3>빠른 로그인</h3>
    <button class="quick-login">user01@kh.or.kr</button>
    <button class="quick-login">user02@kh.or.kr</button>
    <button class="quick-login">soowagger@gmail.com</button>

    <hr>

    <h3>
      회원 목록 조회(비동기)
      <button id="selectMemberList">조회</button>
    </h3>

    <table border="1">
      <thead>
        <th>회원번호</th>
        <th>이메일</th>
        <th>닉네임</th>
        <th>탈퇴여부</th>
      </thead>

      <tbody id="memberList">

      </tbody>
    </table>

    <hr>

    <h3>특정 회원 비밀번호 초기화(Ajax)</h3>
    <div>
      회원번호 :
      <input type="text" id="resetMemberNo">
      <button id="resetPw">비밀번호 pass01!로 초기화</button>
    </div>

    <hr>

    <h3>특정 회원(회원번호) 탈퇴 복구(Ajax)</h3>
    <div>
      회원번호 :
      <input type="text" id="restorationMemberNo">
      <button id="restorationBtn">복구하기</button>
    </div>

  </section>

6-1) 빠른 로그인

main.js

/* 빠른 로그인 */
const quickLoginBtns = document.querySelectorAll(".quick-login");

quickLoginBtns.forEach( (item, index) => {
    // item : 현재 반복 시 꺼내온 객체
    // index : 현재 반복 중인 인덱스

    // quickLoginBtns 요소인 button 태그 하나씩 꺼내서 이벤트 리스너 추가
    item.addEventListener("click", () => {

        const email = item.innerText; // 버튼에 작성된 이메일 얻어오기
        
        location.href = "/member/quickLogin?memberEmail=" + email;
        
    });

});

6-2) 회원 목록 조회(비동기)

main.js

/* 회원 목록 조회(비동기) */

// 조회 버튼
const selectMemberList = document.querySelector("#selectMemberList");

// tbody
const memberList = document.querySelector("#memberList");

// td 요소를 만들고 text 추가 후 반환
const createTd = (text) => {
    const td = document.createElement("td");
    td.innerText = text;
    return td; 
}

// 조회 버튼 클릭 시
selectMemberList.addEventListener("click", () => {

    // 1) 비동기로 회원 목록 조회
    //   (포함될 회원 정보 : 회원번호, 이메일, 닉네임, 탈퇴여부)

    fetch("/member/selectMemberList")
    .then(resp => resp.json()) // JSON.parse(resp)
    .then(list => {

        console.log(list);

        // 이전 내용 삭제
        memberList.innerHTML = "";

        // tbody에 들어갈 요소를 만들고 값 세팅 후 추가
        list.forEach( (member, index) => {
            // member : 현재 반복 접근 중인 요소
            // index : 현재 접근중인 인덱스

            // tr 만들어서 그 안에 td 만들고, append 후
            // tr을 tbody에 append

            const keyList = ['memberNo', 'memberEmail', 'memberNickname', 'memberDelFl'];

            const tr = document.createElement("tr");
            // <tr></tr>
            keyList.forEach( key => tr.append( createTd(member[key])) )

            /* 
                <tr>
                    <td>1</td>
                    <td>user01</td>
                    <td>유저일</td>
                    <td>N</td>
                </tr>

                <tr>
                    <td>1</td>
                    <td>user01</td>
                    <td>유저일</td>
                    <td>N</td>
                </tr>
            */

            // tbody 자식으로 tr 추가
            memberList.append(tr);

        });

    });
    
});

6-3) 특정 회원 비밀번호 초기화(Ajax)

/* 특정 회원 비밀번호 초기화 */
const resetMemberNo = document.querySelector("#resetMemberNo");
const resetPw = document.querySelector("#resetPw");


resetPw.addEventListener("click", () => {

    // 입력 받은 회원 번호 얻어오기
    const inputNo = resetMemberNo.value;

    if(inputNo.trim().length == 0) {
        alert("회원 번호를 입력해주세요.");
        return; 
    }

    fetch("/member/resetPw", {
        method : "PUT", // PUT : 수정 요청 방식
        headers : {"Content-Type" : "application/json"},
        body : inputNo
    })
    .then(resp => resp.text())
    .then(result => {
        // result == 컨트롤러로부터 반환받아 Text로 파싱한 값
        // "1", "0"

        if(result > 0)  {
            alert("초기화 성공!");
        } else {
            alert("해당 회원이 존재하지 않습니다 :-(");
            
        }
    });
});