게시판 - 조회수 올리기

ajax를 이용하여 게시판의 조회수를 increment시키는 기능을 구현해보자 

 

게시판 글 상세보기 => input b_idx는 url로 넘어온 글의 idx이다 

<div id="board_write">
<form method="post">
    {% csrf_token %}
    <div id="hit-num"><span class="hit-num"></span></div>
    <input type="hidden" id="b_idx" name="b_idx" value="">
    <table class="list_tbl" style="text-align: center; border: 1px solid #ddddda">
        <thead>
            <tr>
                <th colspan="2" style="background-color: #eeeeee; text-align: center;"><h3>게시판 글 상세보기</h3></th>
            </tr>
        </thead>    
        <tbody>
            <tr>
                <td><span class="pull-left">&nbsp;&nbsp;&nbsp;아이디 : <b>{{ user_id }}</b></span></td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" placeholder="글 제목" name="title" id="utitle" required></td>
            </tr>
            <tr>
                <td><input type="password" class="form-control" placeholder="글 비밀번호" name="pw" id="upw" style="width: 150px;"></td>
            </tr>
            <tr>    
                <td><textarea class="form-control" placeholder="글 내용" name="content" id="ucontent" style="height: 350px" required></textarea></td>
            </tr>
        </tbody>
    </table>
    <div class="post_bottom">
    <input type="checkbox" id="lockpost" name="lockpost"><span>비밀글</span><br><br></div>
    <button type="button" id="udt_list" class="btn btn-info">수정</button>
    <button type="button" id="del_list" class="btn btn-danger">삭제</button>
    <button type="button" id="go_list" class="btn btn-secondary">목록</button>
</form>
</div>

게시판 글 idx는 url parameter를 이용해서 전달한다.

// get board idx //
function getIndex() {
    let url = window.location.search;
    let getIdx = url.split('=');
    let b_idx = getIdx[1];

    return b_idx;
}

document.ready에 호출하는 ajax function => b_idx값을 전달하여 db에서 게시글 data를 불러오고 조회수를 표시 => 통신이 끝난후(complete) 조회수를 증가시키는 udt_hit() call

function sel_record(b_idx) {

    let user = "{{ user_id }}";
    let idx = b_idx;

    form_data = {
        "REQ_USER": user,
        "REQ_IDX": idx,
        "STATUS": 'select'
    };

    console.log(form_data);

    $.ajax({
        type: "POST",
        url: "{% url 'ajax_list_detail' %}",
        headers: { 'X-CSRFTOKEN' : '{{ csrf_token }}' },
        data: JSON.stringify(form_data),
        success: function (data) {
            var res_data = data;
            var res_cnt = res_data.res_sel.length;
            console.log(res_data);

           $('#utitle').val(res_data.res_sel[0].title);
           $('#upw').val(res_data.res_sel[0].pw);
           $('#ucontent').val(res_data.res_sel[0].content);

           $('#b_idx').attr('value', res_data.res_sel[0].idx);
           $('.hit-num').text('조회수: ' + res_data.res_sel[0].hit);
           $('.hit-num').css("font-weight", "bold");

           var lc_post = res_data.res_sel[0].lock_post;
           if(lc_post == 1) {
            $('#lockpost').prop('checked', true); 
           }else{
            $('#lockpost').prop('checked', false); 
           }
            
            // alert('ajax 통신성공'); 
        },
        error: function (xhr, status, error) {
            alert('ajax 통신에러');
        },
        complete: function() {
            var hit_udt = $('.hit-num').text().substr(-1, 1);
            var b_idx = $('#b_idx').val();
            // call udt function that updates hit-num // 
            udt_hit(b_idx, hit_udt);
        }
    });
    
} // sel_record();

조회수만을 update하는 ajax처리

// updates hit-num only //
function udt_hit(b_idx, hit_udt) {

    form_data = {
        "REQ_IDX": b_idx,
        "REQ_HIT": hit_udt,
        "STATUS": 'update_hit'
    };

    console.log(form_data);

    
    $.ajax({
        type: "POST",
        url: "{% url 'ajax_list_detail' %}",
        headers: { 'X-CSRFTOKEN' : '{{ csrf_token }}' },
        data: JSON.stringify(form_data),
        success: function (data) {
            var res_data = data;
            console.log(res_data);
        
            $('.hit-num').text('조회수: ' + res_data.res_udt);
        },
        error: function (xhr, status, error) {
            alert(error);
            alert('ajax 통신에러');
        }
    });
    

} // udt_hit();

넘어온 data는 이렇게 db에 처리해줬다.

 # update hit-num board #
    if(reqstatus == "update_hit"):
        reqidx = res['REQ_IDX']
        reqhit = int(res['REQ_HIT'])

        reqhit = reqhit + 1

        udt_cols = 'hit'
        udt_v = f'{reqhit}'

        # 조건 idx='게시글 idx' # 
        udt_cond = f"idx='{reqidx}' "
            
        data.fn_db_udt('board2', udt_cols, udt_v, udt_cond)
        res_udt = reqhit

++ html부분은 다른 코드를 참조했고 python + js ajax부분만 작업해봤다. 연습용.