"장고 실시간 추천"의 두 판 사이의 차이

Pywiki
둘러보기로 가기 검색하러 가기
 
(사용자 2명의 중간 판 3개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
== 개요 ==
 
== 개요 ==
추천기능은 앞서 [[장고 추천기능]]에서 만들었다. 다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.
+
추천기능은 앞서 [[장고 추천기능]]에서 만들었다. 앞의 내용을 참고한 후 진행하자. [[장고 추천기능]]
 +
 
 +
다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.
  
 
기본적으로 [[장고 추천기능]] 문서에서 사용한 코드에서 변형을 가한다.
 
기본적으로 [[장고 추천기능]] 문서에서 사용한 코드에서 변형을 가한다.
18번째 줄: 20번째 줄:
 
     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]]

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 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;]