"분류:장고 Ajax"의 두 판 사이의 차이

Pywiki
둘러보기로 가기 검색하러 가기
 
52번째 줄: 52번째 줄:
  
 
== 뷰 수정 ==
 
== 뷰 수정 ==
기본적인 뷰의 형태는 다음과 같다.<syntaxhighlight lang="python">
+
기본적인 뷰의 형태는 다음과 같다.
 +
 
 +
ajax의 data 안에 사전형으로 데이터가 담기는데, 뷰에선 request.GET['이름'] 형태로 담긴 데이터를 사용할 수 있음.<syntaxhighlight lang="python">
 
def likes(request):  
 
def likes(request):  
 
     if request.is_ajax():  # ajax인지 여부 판별
 
     if request.is_ajax():  # ajax인지 여부 판별
58번째 줄: 60번째 줄:
 
         context = {'like_count' : post.like.count(), "message":message}  # 보낼 데이터 담기
 
         context = {'like_count' : post.like.count(), "message":message}  # 보낼 데이터 담기
 
         return HttpResponse(json.dumps(context), content_type='application/json')     
 
         return HttpResponse(json.dumps(context), content_type='application/json')     
</syntaxhighlight>
+
</syntaxhighlight>ajax의 success 함수 안에 response(json)이 담기는데, 안의 사전은 마찬가지로 닷 문법으로 접근할 수 있다.
 
[[분류:장고 기능구현(중급)]]
 
[[분류:장고 기능구현(중급)]]

2022년 5월 17일 (화) 14:17 기준 최신판

1 개요[편집 | 원본 편집]

모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활용면에서의 낭비를 줄이기 위한 기술이다.

보통 JQuery의 Ajax를 이용한다.

2 JQuery를 통한 사용법[편집 | 원본 편집]

2.1 탬플릿 수정[편집 | 원본 편집]

과정 설명 코드
head 변경 head태그 안에 넣어주자.

JQuery를 사용할 수 있게끔.(static에서 쓰는 경우도 많다.)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
body 변경 body 안의 적절한 곳에 넣어주자.

$(#submit)은 id가 submit인 엘리먼트,

$(.submit)은 class가 submit인 엘리먼트이다. 적절하게 활용하자.


뷰에서 json파싱을 위해 JSON.stringify를 사용한다.

<script type="text/javascript">
$('#submit').on('click', function(e) {
    data = $('#text').val();
    $.ajax({
        type:'POST',
        url:'{% url '앱:인덱스' %}}',
        data:JSON.stringify(data),
        success:function(json){
            console.log("data pass success",json);
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); 
        }
   });
  });
</script>

2.2 뷰 수정[편집 | 원본 편집]

기본적인 뷰의 형태는 다음과 같다.

ajax의 data 안에 사전형으로 데이터가 담기는데, 뷰에선 request.GET['이름'] 형태로 담긴 데이터를 사용할 수 있음.

def likes(request): 
    if request.is_ajax():  # ajax인지 여부 판별
        ....
        context = {'like_count' : post.like.count(), "message":message}  # 보낼 데이터 담기
        return HttpResponse(json.dumps(context), content_type='application/json')

ajax의 success 함수 안에 response(json)이 담기는데, 안의 사전은 마찬가지로 닷 문법으로 접근할 수 있다.

"장고 Ajax" 분류에 속하는 문서

이 분류에는 문서 1개만이 속해 있습니다.