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

Pywiki
둘러보기로 가기 검색하러 가기
(새 문서: == 개요 == 구글에서 개발한 비동기통신 기술. 모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활...)
 
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
== 개요 ==
 
== 개요 ==
−
구글에서 개발한 비동기통신 기술.
 
−
 
 
모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활용면에서의 낭비를 줄이기 위한 기술이다.
 
모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활용면에서의 낭비를 줄이기 위한 기술이다.
  
 
보통 JQuery의 Ajax를 이용한다.
 
보통 JQuery의 Ajax를 이용한다.
 +
 +
= JQuery를 통한 사용법 =
 +
 +
== 탬플릿 수정 ==
 +
{| class="wikitable"
 +
!과정
 +
!설명
 +
!코드
 +
|-
 +
|head 변경
 +
|head태그 안에 넣어주자.
 +
JQuery를 사용할 수 있게끔.(static에서 쓰는 경우도 많다.)
 +
|<syntaxhighlight lang="html+django">
 +
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 +
</syntaxhighlight>
 +
|-
 +
|body 변경
 +
|body 안의 적절한 곳에 넣어주자.
 +
$(#submit)은 id가 submit인 엘리먼트,
 +
 +
$(.submit)은 class가 submit인 엘리먼트이다. 적절하게 활용하자.
 +
 +
 +
뷰에서 json파싱을 위해 JSON.stringify를 사용한다.
 +
|<syntaxhighlight lang="html+django">
 +
<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>
 +
</syntaxhighlight>
 +
|-
 +
|
 +
|
 +
|
 +
|}
 +
 +
== 뷰 수정 ==
 +
기본적인 뷰의 형태는 다음과 같다.
 +
 +
ajax의 data 안에 사전형으로 데이터가 담기는데, 뷰에선 request.GET['이름'] 형태로 담긴 데이터를 사용할 수 있음.<syntaxhighlight lang="python">
 +
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')   
 +
</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개만이 속해 있습니다.

ㅈ

원본 주소 "http://id8436.iptime.org:2786/mediawiki/index.php?title=분류:장고_Ajax&oldid=1240"