본문 바로가기
JAVA

Spring Boot 회원정보 출력 (3) 비동기 통신 Ajax

by fouink 2022. 9. 17.

스프링 부트 서버에서

 회원 정보의 값을 이런식으로 리턴하도록 설정했다.

자세히보면 team부분은 한명의 사용자가 여러 개의 팀을 가질 수 있어서 배열로 만들어서 리턴해준 것이다.

그래서 저 팀 부분을 View단의 화면에 여러개를 띄워야 한다.

 

- myPage.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>내 정보</title>
</head>
<body>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">

        console.log(sessionStorage.getItem("token"));
        $.ajax({
            contentType: "application/json",
            type: "POST",
            url: "/api/v1/user/mypage",
            headers: {'Authorization':sessionStorage.getItem("token")},
            dataType: "json",
        }).done(function (res) {
            console.log("응답 성공");
            console.log(res);
            const inHtml_username = document.getElementById("username");
            inHtml_username.innerHTML = `<a>` + res.id + `</a>`;

            const inHtml_name = document.getElementById("user_name");
            inHtml_name.innerHTML = `<a>` + res.user_name + `</a>`;

            const inHtml_email = document.getElementById("user_email");
            inHtml_email.innerHTML = `<a>` + res.user_email + `</a>`;

            const inHtml_nickname = document.getElementById("user_nickname");
            inHtml_nickname.innerHTML = `<a>` + res.user_nickname + `</a>`;

            const inHtml_gender = document.getElementById("user_gender");
            inHtml_gender.innerHTML = `<a>` + res.user_gender + `</a>`;

            const inHtml_phone = document.getElementById("user_phone");
            inHtml_phone.innerHTML = `<a>` + res.user_phone + `</a>`;

            const inHtml_birthday = document.getElementById("user_birthday");
            inHtml_birthday.innerHTML = `<a>` + res.user_birthday + `</a>`;

            //수정된 부분
            for(let i=0;i<res.team.length;i++){
                const inHtml_team = document.getElementById("team");
                inHtml_team.innerHTML += `Team Title : <a>`+res.team[i].title+`</a><br/>`;
            }
            //------
        })
            .fail(function (res) {
                console.log(res);
                alert("로그인 후 접근 가능한 페이지 입니다.");
                window.location.replace("/loginPage");
            });
    </script>
    <center><h2>내 정보</h2></center>
    <strong>아아디 : </strong>
    <span id="username"></span>
    <hr/>

    <strong>이름 : </strong>
    <span id="user_name"></span>
    <hr/>

    <strong>이메일 : </strong>
    <span id="user_email"></span>
    <hr/>

    <strong>생일 : </strong>
    <span id="user_birthday"></span>
    <hr/>

    <strong>닉네임 : </strong>
    <span id="user_nickname"></span>
    <hr/>

    <strong>성별 : </strong>
    <span id="user_gender"></span>
    <hr/>

    <strong>전화번호 : </strong>
    <span id="user_phone"></span>
    <hr/>
    
    <!--    수정된 부분-->
    <strong>내가 속한 팀 목록</strong>
    <div id="team"></div>
    <!--    수정된 부분-->

</body>
</html>

//수정된 부분 을 설명하자면

우선 리턴받은 team을 for문을 돌린다.

team의 배열을 하나씩 찾아가며 team안의 객체 title값을 하나씩 뽑아서 view단에 출력해준다

 

 

 - 결과

댓글