편집
1,408
번
바뀜
→ajax 사용
== 개요 ==
== 개요 ==
추천기능은 앞서 [[장고 추천기능]]에서 만들었다. 다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.
추천기능은 앞서 [[장고 추천기능]]에서 만들었다. 앞의 내용을 참고한 후 진행하자. [[장고 추천기능]]
다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.
기본적으로 [[장고 추천기능]] 문서에서 사용한 코드에서 변형을 가한다.
== 모델 변형 ==
== 모델 변형 ==
return HttpResponse(json.dumps(context), context_type="application/json")
return HttpResponse(json.dumps(context), context_type="application/json")
</syntaxhighlight>
</syntaxhighlight>
[[분류:장고 기능구현(중급)]]
== ajax 사용 ==
=== html에 직접 입력 ===
<syntaxhighlight lang="html+django">
<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>
</syntaxhighlight>
[error함수 안에서 resuest 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;]
[[분류:장고 Ajax]]