"분류:장고 Ajax"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
(새 문서: == 개요 == 구글에서 개발한 비동기통신 기술. 모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활...) |
|||
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인 엘리먼트이다. 적절하게 활용하자.
|
<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>
|