[SpringBoot] 게시글 상세조회 ajax 비동기식 조회하기

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

페이지에서 게시글 목록들 중 한 게시글을 클릭했을 때,  우측 div 박스에 내용이 출력되게 하려고 하였습니다.

 

게시글 상세조회창 띄우기

<시도1>

<div class="ctn-right">
<div class="right-wrap">
    <div class="right-container" var="r" items="${rlist}">
        <div class="right-header">
            <div class="right-userid">
                <button class="userid-btn">Id</button>
                <h4 id="reportWriter">${r.reportWriter}</h4>
            </div>
            <div class="rigth-date">
                <h4 id="enrollDate">${r.enrollDate}</h4>
            </div>
        </div>
        <div class="right-title">
            <button class="title-btn">제목</button>
            <h4 id="reportTitle">${r.reportTitle}</h4>
        </div>
        <div class="right-detail">
            <button class="detail-btn">내용</button>
            <h4 id="reportContent">${r.reportContent}</h4>
        </div>
        <div class="right-confirm">
            <button class="confirm-btn">확인</button>
        </div>
    </div>
</div>
</div>

<script>
function detailReport(e,no){
console.log(no);
var reportNo = no;
$.ajax({
    url:"${contextPath}/detailReport",
    data:{reportNo : reportNo},
    success: function(data){
        console.log(data);

        console.log(reportWriter); //불러온 값은 잘못되지 않았는데, 내가 불러온 값이 잘못됨
        $('#reportWriter').text(reportWriter),
        $('#enrollDate').text(data.enrollDate),
        $('#reportTitle').text(data.reportTitle),
        $('#reportContent').text(data.reportContent)
    },
    error: function () {
        alert("상세 정보를 불러오는데 실패했습니다.");
    }
});
}

console.log(reportWriter);으로 콘솔에 찍힌 reportWriter을 확인해보니, jsp에서 내가 누른 게시글의 항목이 상세조회창에서 받아오는 값이 [objecj HTMLHeadingElement]로 출력되는 것을 확인할 수 있었습니다. 불러올 값은 존재하는데 불러오는 과정에서 제대로 값이 불러와지지 않았습니다.

 

<시도2>

var htmlOut='';
for(var idx in data){
    htmlOut += '<tr>';
    htmlOut += '    <td>'+nvl(data[idx].col1)+'</td>';
    htmlOut += '    <td>'+nvl(data[idx].col2)+'</td>';
    htmlOut += '</tr>';
}
$('#test ').append(htmlOut);

두번째 시도로 코드의 중간을 바꿔보았습니다. 그래도 jsp에서 내가 누른 게시글의 항목이 상세조회창에서 받아오는 값은 [object HTMLInputElement]를 받아와졌습니다.

 

<시도3>

- 컨트롤러

@ResponseBody
@GetMapping("/detailReport")
public Report detailReport(
        Model model,
        int reportNo,
        int [] rowCheck
        ) {
    log.info("reportNo ={}",reportNo);
    Report detailList = cService.detailList(reportNo); 
    log.info("detailList={}",detailList);

    return detailList;
}

컨트롤러의 log.info를 통해 확인해보니 내가 누른 게시글의 넘버가 제대로 찍혔고, detailList에 출력될 내용이 담기면서 상세보기창으로 값이 화면에 뿌려졌습니다.

 

- 스크립트

<script>
function detailReport(e,no){
    console.log(no);
    var reportNo = no;

    $.ajax({
        url:"${contextPath}/detailReport",
        data:{reportNo : reportNo},
        success: function(data){
            console.log(data);
            console.log(reportWriter); 
            $('#reportWriter').text(data.reportWriter);
            $('#enrollDate').text(data.enrollDate);
            $('#reportTitle').text(data.reportTitle);
            $('#reportContent').text(data.reportContent);

        },
        error: function () {

        }
    });
}

</script>

게시글을 누르는 div에 onclick="detailReport"를 부여하여, 매개변수로 even와 reportNo의 값을 넣어주었습니다.
reportNo값을 가지고 해당하는 게시글의 넘버와 알맞은 게시글을 상세조회창에 출력할 수 있도록 컨트롤러로 데이터를 넘겨줄 수 있었습니다.

 

맨 처음에 값을 불러오는 부분에서 매개변수나 value값이 없이 부르면 안되는 것을 알았고, 데이터 값이 출력되는 과정에서도 값이 제대로 넘어가지 않는 등의 모습을 console.log나 log.info를 통해 계속 확인하는 과정의 중요성을 느꼈습니다.

+ 만약 버튼 등 클릭에 이벤트를 부여할 경우 input type="hidden"으로 value값을 함께 넘겨 줄 수도 있었습니다. 

 

 

<JSP>

<div class="wrap">
      <jsp:include page="/common/Header.jsp" />
    <div class="ctn">
        <div class="side-bar">
            <div class="controller">
                 <div class="member-controller cont" onclick="location.href='${contextPath}/adminMain';">
                    <span class="material-symbols-outlined"> group </span>
                    <h3>회원 관리</h3>
                </div>
                <div class="det-wrapper">
                    <div class="member det">
                        <!-- <span class="material-symbols-outlined">
                        new_releases
                    </span> -->
                        <div class="det-area" onclick="location.href='${contextPath}/adminWBlist';">
                            <h4>인플루언서</h4>
                        </div>
                    </div>
                    <div class="member det">
                        <!-- <span class="material-symbols-outlined">
                        person_off
                    </span> -->
                        <div class="det-area" onclick="location.href='${contextPath}/adminWBlist2';">
                            <h4>블랙리스트</h4>
                        </div>
                    </div>
                    <!-- <div class="member det">
                     <span class="material-symbols-outlined pass">
                        fingerprint
                    </span> 
                    <div class="det-area">
                        <h4>비밀번호 관리</h4>
                    </div>
                </div> -->
                </div>
                <div class="feed-controller cont" onclick="location.href='${contextPath}/adminFeed';">
                    <span class="material-symbols-outlined"> data_table </span>
                    <h3>피드 관리</h3>
                </div>
                <div class="report-controller cont" onclick="location.href='${contextPath}/adminReport';">
                    <span class="material-symbols-outlined"> feedback </span>
                    <h3>신고 관리</h3>
                </div>
                <div class="logout-icon" style="margin-left:190px;">
                    <div class="logout-area">
                        <a class="material-symbols-outlined" href="${contextPath}/logout.me">
                            <span class="material-symbols-outlined logout"> logout </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="header-bar">
            <div class="content-area">
                <div class="content-header">
                    <div class="icon-area">
                        <div class="content-icon">
                            <span class="material-symbols-outlined icon" onclick="location.href='${contextPath}/adminWBlist';"> verified </span>
                            <span class="material-symbols-outlined icon" onclick="location.href='${contextPath}/adminWBlist2';"> person_off </span>
                            <!-- <span class="material-symbols-outlined icon">
                                fingerprint
                                </span> -->
                            <div class="font">l</div>
                            <span class="material-symbols-outlined" onclick="location.href='${contextPath}/adminFeed';"> data_table </span>
                            <div class="font">l</div>
                            <span class="material-symbols-outlined" onclick="location.href='${contextPath}/adminReport';"> feedback </span>
                        </div>
                        <input type="hidden" id="reportNo" value="${reportNo}" />
                        <button type="button" id="r-del-btn${reportNo}" style="margin-left:30px;" >Del</button>
                    </div>
                </div>

                <div class="content-body">
                    <form id="form-del-report-admin" action="${contextPath}/processReport" >
                        <div class="category-wrap" id="reporpList">
                            <div class="category">
                                <input type="checkbox" id="selectAllBtn" class="check-btn" onclick="selectAll();">
                                <div class="title-no" style="margin-left="10px;">
                                   <span></span>
                                    No.
                                </div>
                                <div class="title-id">
                                    <span>WRITER</span>
                                </div>
                                <div class="title-content">
                                    <span>TITLE</span>
                                </div>
                                <div class="title-date">
                                    <span>DATE</span>
                                </div>
                            </div>
                        </div>

                        <div class="admin-area">
                            <c:if test="${empty rlist}">
                              <td colspan="5" align="center">신고 내역이 없떠요ㅠㅠ</td>
                           </c:if>

                            <div class="content-left" >
                                <c:forEach var="r" items="${rlist}" >
                                    <div class="search-report" id="selectR${r.reportNo}" onclick="detailReport(event,${r.reportNo})">
                                        <input type="checkbox" name="rowCheck" class="rowCheck-btn" value="${r.reportNo}"/>
                                        <div class="title-no de">
                                            <span></span>
                                            <h4 id="no">${r.reportNo}</h4>
                                        </div>
                                        <div class="title-id de">
                                            <h4>${r.userNick}</h4>
                                        </div>
                                        <div class="title-content de">
                                            <h4>${r.reportTitle}</h4>
                                        </div>
                                        <div class="title-date de">
                                            <h4>${r.enrollDate}</h4>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                      </form>

                            <div class="ctn-right">
                                <div class="right-wrap">
                                    <div class="right-container" >
                                        <div class="right-header">
                                            <div class="right-userid" >
                                                <button class="userid-btn">NICK</button>
                                                <h4 id="reportWriter">${userNick}</h4>
                                            </div>
                                            <div class="rigth-date">
                                                <h4 id="enrollDate">${enrollDate}</h4>
                                            </div>
                                        </div>
                                        <div class="right-title">
                                            <button class="title-btn">제목</button>
                                            <h4 id="reportTitle">${reportTitle}</h4>
                                        </div>
                                        <div class="right-detail">
                                            <button class="detail-btn">내용</button>
                                            <h4 id="reportContent">${reportContent}</h4>
                                        </div>
                                        <div class="right-confirm">
                                            <input type="hidden" id="reportNo" value="${reportNo}" /> 

                                            <button type="button" class="confirm-btn" id="confirm-btn${reportNo}" onclick="process(${reportNo});">처리</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

참고하실 분들 jsp 코드를 참고하시기 바랍니다.