Django 에서 JQuery의 Ajax 통신하기!!!!

이번 시간에는 Django에서 비동기식 통신을 해보려고 한다

 

흔히 Ajax라고 하더구나

 

Ajax는 보통 JQuery에서 쓰이는 $.ajax 를 많이 쓰더라

 

그래서 이번에는 JQuery의 Ajax를 이용한 비동기식 통신을 해보겠다

 

일단 Test 할 페이지를 만들어 보자

 

제가 ajax 좋아합니다 사실 짝사랑중이에요

 

일단은 입력값을 넣어서 버튼을 눌렀을 때 POST형식으로 데이터를 주고받게끔 하겠다

 

중요한 점은 JQuery라이브러리를 넣어주자

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 

그리고 친절하게 body 안에 있는 코드를 넣어주겠다

반갑다능 ★
<input type="text" class="title" >
<input type="text" class="content" >
<input type="button" class="btnAjax" value="TEST">

 

이제 Ajax를 쓰기 위해 Java Script코드가 필요하다 

 

처음 할 때는 꾀나 어려울 것이다.  ( 본인은 Ajax 통신하려고 3일 고생했었음.ㅠㅠ )

 

제가 하나씩 설명해 드려요

 

버튼을 눌렀을때 실행되는 함수를 만들어주기 위해,  버튼 요소를 찾아준다

let btnAjax = document.querySelector('.btnAjax');

 

그리고 버튼의 이벤트를 생성해준다. 무슨 이벤트 ? Click 이벤트 !

btnAjax.addEventListener('click', e => {

}

 

그리고 함수 안에 변수 title, content를 만든다

 

이렇게 하면 버튼을 눌렸을 때, 입력한 값이 변수 title과 content에 쏙 들어갈 것이다

let title = document.querySelector('.title').value;
let content = document.querySelector('.content').value;

 

이거슨,,, Java Script의 Object이다

 

많이 들어보았을 것이고, 앞으로도 많이 쓸 거 같다. ex) { 'title' : 'hello', 'content' : 'world' }

let param = {
  'title': title,
  'content' : content,
}

 

그러면 브라우저를 잠깐 볼까

 

 

요로시쿠~

 

자 이제 Ajax 통신을 해보자!

 

아주 간단하게 작성하였다 ( POST방식 )

 

제가 잘 설명해 줄게요 ♡

 

url :

・통신할 URL를 설정한다 ex ) '/test/'

 

type :

・method 방식을 결정한다 ex) 'GET', 'POST', 'PUT', 'DELETE' .....

 

data :

・전송할 data를 결정한다 ex) { 'title' : '외로워도', 'content' : '슬퍼도' }

 

success : function(){} 

・통신이 성공했을 때 실행되는 함수

 

error : function(){}

・통신이 실패했을 때 실행되는 함수

 

일단 위에 옵션을 익혀두면 좋다

 

참고로 JSON.stringify() 이거는 한번 검색하길 바란다. 

 

 

Ajax를 만들었으니 이번에는 통신할 url 'test'를 만들어 보자

 

urls.py에 추가하였다

 

name을 꼭 설정하자 'test'

 

path를 만들었으니 함수도 있어야겠다

 

초간단하다 java 하지말까 생각도 할정도로

일단 Ajax든 뭐든 요청을 할 때는 request라는 곳에 담아서 들어온다

 

Ajax 같은 경우에는 data를 body 담아서 오기 때문에 request.body라고 하면 { 'title' : 'hello', 'content', 'world' } 같은

 

데이터를 뽑아낼 수 있다

request.body

 

 

그것을 사용하기 위해 변수에 담는다

 

그때는 import json에서 제공하는 것을 써야 한다

jsonObject = json.loads(request.body)

 

그리고 데이터를 한번 찾아볼 때는 

 

get()을 이용하면 된다. 아래의 같은 경우는 데이터가 { 'title' : 'hello', 'content', 'world' } 로 왔다면 

 

print 로 출력했을 때 world 가 출력이 될 것이다

print(jsonObject.get('title'))

 

아래의 코드는 return을 json형식으로 return 하겠다는 뜻이 되겠다

return JsonResponse(jsonObject)

 

 

자 이제 화면으로 돌아와서 통신을 해보자!!

 

입력하고, TEST를 누른다

 

과연~~ 두근두근두근

 

판사님이 등장하셨다 

 

안된단다 이유는 뭘까?

 

당황하지마라 내가 있으니까

 

 

콘솔을 확인하니 영어는 몰라도 CSRF token은 보이더라

 

자 이제 구글선생님 모셔올께요,,,

 

구글 검색하면서 겁나 찾아보았다

 

@csrf_exempt 라는 어노테이션을 붙이면 된단다. 그 말은 보안적인 것을 포기한다는 말이었다

 

어머니는 csrf_exempt가 싫다고 하셨어 어머니는 csrf.......하셨어

 

하지만 보안적인 그것을? 포기하고 싶지 않았다 

 

뭐 뼈를 얻기 위해 살을 포기한다더니 진짜 다들 살을 포기하더라

 

그래서 난 여러 가지 테스트를 시도해보았다

 

csrf 토큰을 보내면 되지 않을까라고,,,,

 

난 뼈와 살도 얻었쪙

 

Ajax는 여러 가지를 보낼 수 있기 때문에 진짜 오랫동안 찾아본 결과다 

headers: {
   'X-CSRFTOKEN' : '{{ csrf_token }}'
},

 

자 이제 테스트를 해보자

 

TEST를 누르고~

 

 

console을 확인해보니! 잘 받아왔고, 잘 통신했다 ㅎㅎ