"장고 실시간 추천"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
67번째 줄: | 67번째 줄: | ||
</script> | </script> | ||
− | </syntaxhighlight>[error함수 안에서 resuest 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;] | + | </syntaxhighlight> |
+ | |||
+ | |||
+ | [error함수 안에서 resuest 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;] | ||
[[분류:장고 Ajax]] | [[분류:장고 Ajax]] |
2022년 5월 17일 (화) 14:15 기준 최신판
1 개요[편집 | 원본 편집]
추천기능은 앞서 장고 추천기능에서 만들었다. 앞의 내용을 참고한 후 진행하자. 장고 추천기능
다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.
기본적으로 장고 추천기능 문서에서 사용한 코드에서 변형을 가한다.
2 모델 변형[편집 | 원본 편집]
@login_required(login_url='membership:login')
def vote_question(request, question_id):
question = get_object_or_404(Question, pk=question_id)
question_like, question_like_created = question.like_user.get_or_create(user=request.user)
#위 함수가 어떤 기능인지 제대로 파악해야겠다.
#question.voter.add(request.user)
if not question_like_created: # 생성된 게 아닌 경우.
question_like.delete() # 삭제한다.
#기존의 이 줄을 아래로 대체한다. return redirect('pool:detail', question_id=comment.answer.question.id)
#ajax를 구현하기 위해 json으로 반환한다.
return HttpResponse(json.dumps(context), context_type="application/json")
3 ajax 사용[편집 | 원본 편집]
3.1 html에 직접 입력[편집 | 원본 편집]
<script type="text/javascript">
(function(){
const contents = document.querySelector('#클래스명')
const textField = document.querySelector('#입력하는 창의 클래스')
function contentsFunc(e){
let elem = e.target; /*클릭한 타겟을 객체화 한다.*/
while (!elem.getAttribute('속성')){
elem = elem.parentNode; /*객체가 해당 속성을 갖고 있을 때까지 찾는다..*/
if (elem.nodeName === 'BODY'){
elem = null;
return; /*BODY까지 올라갔는데 없으면 아무것도 반환하지 않는다.*/
}
}
if (elem.matches('[속성="속성값"]')){
const pk = elem.getAttribute('name'); /*name속성에 좋아요를 할 객체의 pk를 담아둔다.*/
$.ajax({
type: "POST",
url: "{% url '인덱스' %}",
data: {'pk':pk, 'csrfmiddlewaretocken': '{{csrf_tocken}}'}, /*csrf토큰도 담아준다.*/
datatype: "json",
success: function (response){
alert('성공');
const likeCount = document.querySelector('#like-count-'+pk); /*해당 좋아요 카운트를 세는 pk로 구분해둔다.*/
ㅣㅐ likeCount.innerHTML = response.like_count; /*응답의 카운트를 받아 변형해준다.*/
},
error: function (request, status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);}
})
}
}
contents.addEventListener('click', contentsFunc);
})
</script>
[error함수 안에서 resuest 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;]