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"> 아이디 : <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부분만 작업해봤다. 연습용.
'Server-Side Script > Python' 카테고리의 다른 글
django db + migration (0) | 2021.09.30 |
---|---|
django project 설정 / setup (0) | 2021.09.27 |
파이썬 인공지능 라이브러리 (2) | 2021.08.31 |
json & working with json in django (0) | 2021.06.24 |
python 환경설정 (0) | 2021.05.25 |
댓글