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

Pywiki
둘러보기로 가기 검색하러 가기
(새 문서: == 개요 == 구글에서 개발한 비동기통신 기술. 모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활...)
 
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>
 +
|-
 +
|
 +
|
 +
|
 +
|}
 
[[분류:장고 기능구현(중급)]]
 
[[분류:장고 기능구현(중급)]]

2022년 5월 15일 (일) 20:01 판

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>

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

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

ㅈ

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