분류:장고 Ajax
둘러보기로 가기
검색하러 가기
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>
|
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)이 담기는데, 안의 사전은 마찬가지로 닷 문법으로 접근할 수 있다.